Solved

How to make background image repsonsive

Posted on 2013-12-16
4
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

632 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