SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting backgroung image to 100%

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Background-size is css3 and only supported 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 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. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a way to achieve this with the older ie 8 browsers the new ones?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •