Setting backgroung image to 100%

HTML & CSS
1

hi there guys just picking this up so be kind to me lol

what i am trying to is simple i have a image that i would like to use for my background and have included it to the css body tag… i want it to fill 100% width and height of the site so that it fills the page and will do so on different sizes like 800x 600 1024x768 etc etc and i seem to be hitting a bit of a wall what am i doing wrong?

HTML

<!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>
<link rel=“stylesheet” type=“text/css” href=“style.css” />

<title>Untitled Document</title>

</head>

<body>
<!-- start wrapper–>
<div id=“wrapper”>
<img src=“images/mfoam_logo.png” width=“220” height=“92” alt=“logo” />
<!-- wrapper ends–>
</div>
</body>
</html>

CSS

#wrapper
{
margin: 0 auto;
}

body {
background-image: url(images/wave-background.gif);
background-repeat: no-repeat;
background-size: 100%;
}

2

Hi,

Background-size is css3 and only supported [URL=“http://caniuse.com/background-img-opts”]in latest browsers. You will need a capable browser and then you should see the effect that your code would produce. You probably want to use background-attachment:fixed also so that [URL=“http://www.alistapart.com/articles/supersize-that-background-please/”]the image doesn’t scroll and also use the “cover” keyword.

For older browsers however they would just get the single image at normal size unless you want to hack something up for them.

3

is there a way to achieve this with the older ie 8 browsers the new ones?

4

You can see some more methods on this page that should answer your question.

As an aside I don’t really like scaling background images (even with css3) as it always looks odd to me. I’d prefer to see a normal background image that just fades into the background colour at some point. The result is smaller image filesize and a nicer viewing experience.

These large fixed resizing images slow the browsers down and make the page jerky and awkward to use.