- This topic is empty.
-
AuthorPosts
-
October 26, 2013 at 3:47 am #154100expandirParticipant
Hi!
My page is http://www.biomayeutika.org/registroI’m using woothemes Scrollider theme. Im trying to set up a landing page, so I customized my css to make some elements not visible:
.page-id-945 #navigation, .page-id-945 #footer-widgets-container, .page-id-945 #footer, .page-id-945 #nav-container, .page-id-945 #main-nav, .page-id-945 .nav fl {display:none}
And I want this image to fill the entire screen: grupo-6-ok2.jpg (except for the form). I tried several things, Im not really suceeding…
.page-id-945 #wrapper{background: none !important;} .page-id-945 body { background-image:url('http://www.biomayeutika.org/wp-content/uploads/2013/05/grupo-6-ok2.jpg') !important; } .page-id-945 {background-size: cover !important;}
Help is really appreciated! Thanks!!!
October 26, 2013 at 5:08 am #154103georgearnallParticipantIf by this you mean remove the background header, the code is here:
#content-top { background: #f1f1f1; /* Remove this line */ }
I am not exactly sure this is what you want and may require further explanation.
October 26, 2013 at 5:55 am #154107lreliaParticipantbackground-size: 100%
October 28, 2013 at 1:15 am #154275expandirParticipantIt still doesn’t work… I want to fill the entire screen, not just the #wrapper area, with the image below. What I don’t understand is how to select the “footer” area. I must be lame, but it looks as if firebug doesn’t recognize what selectors to use to “select” this “footer” area.
In my 24” screen , it looks like this.
Code as of today
.page-id-945 #wrapper { background-image:url('http://www.biomayeutika.org/wp-content/uploads/2013/05/grupo-6-ok2.jpg') !important; background-size: cover !important; background-size: 100% 100%; }
Page: http://www.biomayeutika.org/registro
Thanks very much everyone.
October 28, 2013 at 1:29 am #154276georgearnallParticipantYou should really apply these styles to the body element if you want it to cover the whole page.
And add
background-position-y: (height of header);
to the body to bump the image down.background-size: 100% 100%;
is doing nothing here becausebackground-size: cover !important;
has higher specificity, you may as well remove it.October 28, 2013 at 1:36 am #154277expandirParticipantThanks George!!!
what I mean by “fill the entire screen” is that it covers the whole screen EXCEPT for the form. I guess what you said will do the trick. Im going to check it right now. Im very grateful.
October 28, 2013 at 2:05 am #154278expandirParticipantWellll. I did what you said … no luck.
I removed : .page-id-945 #footer-widgets-container, .page-id-945 #footer
And now it looks like this: http://www.biomayeutika.org/registro
It looks nicer, and it looks like I can select the footer area now. But I don’t still now how to make the background image fill the entire screen…. :( I must be very lame…
October 28, 2013 at 2:09 am #154279georgearnallParticipantYour code should look like this:
body { background-image:url(‘http://www.biomayeutika.org/wp-content/uploads/2013/05/grupo-6-ok2.jpg’) !important; background-size: cover !important; background-position-y: (height of header); }
Also, could you provide a screenshot so I can see what you mean. My monitor is not big enough to see your problems.
October 28, 2013 at 2:13 am #154281expandirParticipantMy code looks like this (I only want this in one specific page)
.page-id-945 body { background-image:url('http://www.biomayeutika.org/wp-content/uploads/2013/05/grupo-6-ok2.jpg') !important; background-size: cover !important; background-position-y: 120px; }
How it looks in my 24” screen in chrome and iexplorer:
Thanks!!!
October 28, 2013 at 2:24 am #154283georgearnallParticipantTry this:
.page-id-945 { background-image:url(‘http://www.biomayeutika.org/wp-content/uploads/2013/05/grupo-6-ok2.jpg’) !important; background-size: cover !important; background-position-y: 120px; } .page-id-945 #wrapper { background: transparent !important; }
Are you looking at http://www.biomayeutika.org/registro/, your screenshots seem to be different ? Could you make sure you update the code on the website.
Thanks
October 28, 2013 at 2:39 am #154284expandirParticipantOMG.. Thanks!
I readded .page-id-945 #footer-widgets-container, .page-id-945 #footer
Now it works perfectly…. Thanks very much George. Im learning a lot. Im very grateful. :) Have a good day
October 29, 2013 at 6:53 am #154449expandirParticipantHey!
It suddenly stopped working. I didn’t even change the code. When it stopped working, I added some code and changed the image. But the image link is there. This CSS is turning me nuts….
.page-id-945 { background-image:url(‘http://www.biomayeutika.org/wp-content/uploads/2013/10/MG_1263.jpg’) !important; background-size: cover !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .page-id-945 #wrapper { background: transparent !important; }
October 30, 2013 at 3:00 am #154586expandirParticipant/bump … please help! I am sorry …. I don’t know what happened
October 30, 2013 at 3:18 am #154587Paulie_DMember.page-id-945 #wrapper { background: transparent !important; }
This may reset all the background settings because you used the short version
You probably meant
.page-id-945 #wrapper { background-color: transparent; }
November 5, 2013 at 5:30 am #155204expandirParticipantIt still doesn’t work. Maybe it has something to do with my pagespeed config? I already contacted them …. It looks as if my image is not really loaded.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.