Question

Currently I’m 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 here is that I’m not using any Javascript at all. But then, the absolute-ly positioned elements become a nightmare when viewed on different screens.

Currently the solution I have is write and position these elements according to different screen sizes (for example, 1024×768 would have the id content’s top value as 10px whereas 1280×800 will have something like top:25px; and so on..) and store them as a separate css file so I can load the appropriate CSS during page load. I feel this is time-consuming and probably in-efficient too. Using percentage values is an option I haven’t explored yet. If you know of an elegant solution, or how the big guys at about.me do it, it would help.

Thank You.

Answer 1

Have you tried using background-image on the body with one of the background-size values? You could use cover or perhaps 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;
}