CSS
CSS
HTML
HTML

How to make background image repsonsive

Hello

I dont really know much css and i was looking at this website

http://www.population-2.com/dev/peekaboo-wp/

and I was wondering if you could point me to the css in this website that makes the background image responsive. I am not sure if it is truly responsive but it seems to resize based on browser resolution

thanks

andiejeAsked: 2013-12-16

Who is Participating?

LVL 31

Alexandre SimõesManager / Technology SpecialistCommented: 2013-12-16

This website uses this jquery plugin:
http://buildinternet.com/project/supersized/

The original background image is:
http://www.population-2.com/dev/peekaboo-wp/wp-content/uploads/2013/08/bg1.jpg

and the plugin initialization can be found on line: 52 of the page source code.

LVL 16

hankknightCommented: 2013-12-16

Here is a pure CSS solution that does not require jQuery or JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body, div {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body
{
height: 100%;
width: 100%;
background: #000 url('http://upload.wikimedia.org/wikipedia/commons/b/be/Apollo17WorldReversed.jpg') no-repeat scroll 50% 50%;
background-size: 100%;
}
</style>
</head>
<body>
</body>
</html>

Open in new window

http://jsfiddle.net/SBu7g/

The trick is: background-size: 100%;
http://www.w3schools.com/cssref/css3_pr_background-size.asp

LVL 2

itkadminCommented: 2013-12-17

I would do this using just the CSS, similar to what hankknight has done.

I would modify it slightly to use different images at different screen sizes. This would keep the download size smaller for people on mobile devices.

@media all and (max-width: 480px) {body 
        {
	background-image: url(../images/MY-SmallImage.png) 
        background-size: cover;
         }
}

@media all and (min-width: 481px) and (max-width: 768px)  {body
        {
	background-image: url(../images/MY-MediumImage.png) 
        background-size: cover;
         }
}
@media all and (min-width: 769px) {body 
        {
	background-image: url(../images/MY-LargeImage.png) 
        background-size: cover;
         }
}

Open in new window

This gives you a different images to download depending on screen size.
Set the image size to whatever works best for the image you are using. hankknight's link to w3c explains the different background size options.

LVL 16

hankknightCommented: 2013-12-17

I like the approach provided by itkadmin better than the approach I posted because it gives you the ability to use a smaller image for smaller devices which saves bandwidth and improves performance.