Create background image that adjusts to different screen resolutions?

[Herman]

I replaced the background image behind the slider in Outreach but it won't display correctly in different desktop resolutions.

Here's the CSS code:

#inner {
background: #5282C4 url(images/inner.png) no-repeat center center;;
clear: both;
margin: 0 auto;
overflow: hidden;
padding: 30px 0;
}

Any solutions?

http://www.washdcfamilyfed.org/

[ramseyp]

Herman,

You can add background-size: 100% auto; to that style declaration.

#inner {
background: #5282C4 url(images/inner.png) no-repeat center center;;
clear: both;
margin: 0 auto;
overflow: hidden;
padding: 30px 0;
background-size: 100% auto;
}

---

Community • Work • Conversations

[nunotmp]

You can use a background size of cover. something like this

#inner {
background: #5282C3 url(images/inner.png) no-repeat center center;
clear: both;
margin: 0 auto;
overflow: hidden;
padding: 30px 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This will adjust to all screen sizes and uses the necessary browser prefixes.

---

Genesis Child Themes – Follow Me

[Herman]

Thanks a lot ramseyp and nunotmp. I decided to go with nunotmp css code. Please check if the image displays correctly in your browser.

http://www.washdcfamilyfed.org/

Here's my follow-up question:
Should I decrease the size of the image or align the monument and church differently on the blue background?

[Author]

Posts