How to make the background image cover the window


Author Message
Michael

Posted: 1/24/2013
Quote message 

I wanted to have a custom background image that will cover the whole window, and stretch when the window is resized while maintaining the aspect ratio.

This is the solution I found:

Go to Options->CSS Options and insert this into Additional CSS styles:

#art-main {
background: url('images/page.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

If you are using a custom CSS Prefix you should replace #art- with your custom prefix instead (keep the hash).
 
ALEKS

Posted: 2/11/2013
Quote message 

where are this css options to find? this TIP* could be used for wordpress designs also?
 
S

Posted: 8/29/2013
Quote message 

This works very well, thank you.
Only 1 tiny issue now - how to get the extra space removed from below the footer, do you have a tip for this?
 
Unglood

Posted: 9/10/2013
Quote message 

Quote S:

Only 1 tiny issue now - how to get the extra space removed from below the footer, do you have a tip for this?


If you are referring to the 'not-quite-enough-updates-yet-this-month' plugin - Jetpack - then:


img#wpstats {
position:absolute;
top:0;
width:0px;
height:0px;
overflow:hidden;
}

 
S

Posted: 9/10/2013
Quote message 

Thanks, Unglood, but that's not what I was referring to :)