Solved

How to make background image repsonsive

Posted on 2013-12-16

CSS
HTML

2 solutions

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

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

Join The Community

4 Comments

LVL 30

Accepted Solution

by:Alexandre Simões

Alexandre Simões earned 250 total points

ID: 397211742013-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

Assisted Solution

by:hankknight

hankknight earned 250 total points

ID: 397229162013-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

Expert Comment

by:itkadmin

ID: 397247292013-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

Expert Comment

by:hankknight

ID: 397247602013-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.

Featured Post

Question has a verified solution.

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

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

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.

Creating linked dropdowns using jQuery and PHP

Article by: Julian

This article discusses how to create an extensible mechanism for linked drop downs.

Drop-Cap Effect in CSS

Video by: Sarah

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…

Introduction to PHP: Building the Form

Video by: Jason

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 …