How to Insert Background Fixed image in xhtml?

Discussion in 'Web Design and Development' started by Dal123, Jul 21, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I am having trouble following w3schools.com's guide to insert a background image that is fixed. This image is my logo, was thinking of having it fixed, I want to add the links/ navigation there fixed too with contact details. But I'm failing at the first attempt of importing the simple image :mad:.
    I've tried following their simple tutorial on just importing the image and I can do that; obviously looks crap positioning on the page.
    Can somebody tell me what I'm doing wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <title>Untitled Document</title>
    <head>
    
    </head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <body>
    <style type="text/css">
    body
    { 
    background-image:<img src="/Images/Logo-Website.gif">;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: 30% 20%; 
    }
    </style>
    
    </body>
    </html>
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Incorrect CSS syntax:

    background-image:<img src="/Images/Logo-Website.gif">;

    Replace with:

    background-image: url(/Images/Logo-Website.gif);


    Notes:

    For proper syntax and a full explanation of the background properties available please visit this W3C page.
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    Thanks very much, it worked. I also had to remove the / before Images.
    Thank you very much!
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    You're very welcome. On a side note the path can be relative or absolute or start from the document root with the slash as to the background URL, just so folks out there know. I prefer always using relative as less overhead, less typing, and if I migrate the site to another server with a different document root, no issues.

    -jim
     

Share This Page