make background-image cover whole page

[expandir]

Hi!
My page is http://www.biomayeutika.org/registro

I’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!!!

[georgearnall]

If 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.

[lrelia]

background-size: 100%

[expandir]

It 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.

http://ctrlv.in/252095

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.

[georgearnall]

You 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 because background-size: cover !important; has higher specificity, you may as well remove it.

[expandir]

Thanks 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.

[expandir]

Wellll. 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…

[georgearnall]

Your 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.

[expandir]

My 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:

http://ctrlv.in/252095

Thanks!!!

[georgearnall]

Try 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

[expandir]

OMG.. 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

[expandir]

Hey!

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;
}

[expandir]

/bump … please help! I am sorry …. I don’t know what happened

[Paulie_D]

.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;
}

[expandir]

It 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.

http://ctrlv.in/255350

[Author]

Posts