Solved

How to make background image repsonsive

Posted on 2013-12-16
4
274 Views
Last Modified: 2013-12-30
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
0
Comment
Question by:andieje
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 39721174
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.
0
 
LVL 16

Assisted Solution

by:hankknight
hankknight earned 250 total points
ID: 39722916
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
0
 
LVL 2

Expert Comment

by:itkadmin
ID: 39724729
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.
0
 
LVL 16

Expert Comment

by:hankknight
ID: 39724760
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.
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question