Best way to use the whole image as a website background using CSS and still satisfy different screen sizes? (e.g. about.me)

Question

I am currently using this:

HTML:

<div id="container"> <img src="x.jpg" id="bg" /> <div id="content"> <h1>Welcome to my website.</h1> <p>Boo!</p> </div> </div> 

CSS

 #bg{ position:absolute; top:0; left:0; height:100%; z-index:10; } #container{ /* max values provided due to the max size of the image available with me(1200x800) */ max-width:1200px; max-height:800px; } #content{ position:absolute; top:10px; left:100px; z-index:100; } 

The advantage is that I don't use Javascript at all. But then absolute positioned elements become a nightmare when viewed on different screens.

Currently, the solution I have is to record and place these elements according to different screen sizes (for example, 1024x768 will have the top id value as 10px, while 1280x800 will have something like top: 25px, etc. etc.) and save them as a separate css file so that I can load the appropriate CSS while the page is loading. I believe this is time consuming and probably inefficient. Using percentages is an option that I have not yet explored. If you know about the elegant solution or how the big guys at about.me do this, it will help.

Thanks.

Answer 1

Have you tried using background-image in body with one of the background-size values? You can use cover or maybe 100% 100% depending on your needs.

Demo: http://jsfiddle.net/ThinkingStiff/UBaN6/

 body { background-image: url('http://thinkingstiff.com/images/matt.jpg'); background-size: cover; background-repeat: no-repeat; }