html = can you have 2 backgound images?

Discussion in 'Web Design & Coding' started by greggustin, Jul 29, 2006.

  1. greggustin

    greggustin OSNN Addict

    Messages:
    166
    I have a small weaev gif that looks good when tiled as background image
    (ie I hate white html pages)

    but I now also want a watermark gif to lay over the background
    is this possible?
     
  2. madmatt

    madmatt Bow Down to the King Political User

    Messages:
    13,312
    Location:
    New York
    Thread moved to Coding & Design.
     
  3. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    Is this not a CSS trick? Let me reseach, I'm not sure.
     
  4. albybum

    albybum Penguin Rancher

    Messages:
    280
    Location:
    Elizabethton, TN
    Set the body's background as your tiled background image.

    create a div that contains the entire body and set that div's background to your watermark.

    Code:
    <body>
    <div style="width:100%;height:100%;background-image:url('link/to/image');">
    // content
    </div>
    </body>
    

    You can also use css positioning to put the watermark wherever you want instead of using a full-body div.


    Code:
    <html>
    <head><title>Foo</title>
    </head>
    <body style="background-image:url('osnn_tile.gif');margin:0px;">
    <div style="width:100%;height:100%;background-image:url('osnn_watermark.gif');">
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    </div>
    </body>
    </html>
     
    
    Demo: http://albybum.net/temp/osnn_watermark.html
     
    Last edited: Jul 30, 2006
  5. jimi_81

    jimi_81 Moderator Political User

    Messages:
    820
    Location:
    Stoney Creek, ON, Canada
    would z-index and div elements do the trick? absolute positioning of course.
     
  6. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    easiest thing is set one for the html tag and one for the body tag in the external CSS file