Solved

How to make background image repsonsive

Posted on 2013-12-16
4
281 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

739 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