timski08 — 2011-06-15T09:03:58-04:00 — #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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- start wrapper-->
<img src="images/mfoam_logo.png" width="220" height="92" alt="logo" />
<!-- wrapper ends-->
margin: 0 auto;
paulob — 2011-06-15T09:32:34-04:00 — #2
[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](http://www.w3.org/TR/css3-background/#the-background-size) 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.
timski08 — 2011-06-15T09:40:40-04:00 — #3
is there a way to achieve this with the older ie 8 browsers the new ones?
paulob — 2011-06-15T10:07:28-04:00 — #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.