html = can you have 2 backgound images?

greggustin · 29 Jul 2006

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?

madmatt · 29 Jul 2006

Thread moved to Coding & Design.

Not Bman · 29 Jul 2006

Is this not a CSS trick? Let me reseach, I'm not sure.

albybum · 30 Jul 2006

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

jimi_81 · 30 Jul 2006

would z-index and div elements do the trick? absolute positioning of course.

Geffy · 30 Jul 2006

easiest thing is set one for the html tag and one for the body tag in the external CSS file

html = can you have 2 backgound images?

greggustin

OSNN Addict

madmatt

Awesome is as awesome does.

Not Bman

Guest

albybum

Penguin Rancher

jimi_81

OSNN Senior Addict

Geffy

OSNN Veteran Addict

Members online

Affiliates

Latest profile posts

Forum statistics