Resizing background image

Profile · Posted 2004-10-29, 12:00 PM

How do you resize a background image with HTML?

Medieval Bob

I've already asked that.

Silverjinx18

Doh. http://zelaron.com/forum/showthread.php?t=34216

Medieval Bob

HTML does not allow you to stretch background images. You can, however, stretch foreground images. You can simulate a stretching BG image by positioning FG stuff on top of a normal image, then using JS to update the image size.

WetWired

Okay um....

Burgundy background with a stretched image (logo.gif) on top of it that's mostly transparent (thus the burgundy will shough through).

How do you code that?

Medieval Bob · 02:52 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
  <body width="100%" bgcolor="#4E2A32" style="margin:0px;">
    <img src="logo.gif" width="100%" />
  </body>
</html>

Then, if you want something on top of that, then try following the img tag with a <div style="position:absolute;left:0px;top:0px;width:10 0%;"></div> containing the rest of the document.

WetWired

ok ... this isn't working

Silverjinx18

What, exactly, isn't working? I've tested it.

WetWired

hmmmmm...I dunno maybe I'm just putting it in the wrong place...when I put it there it like took the whole page off...? I dunno...

Silverjinx18

Yes, that is the page.
As I said, you need to put your page body into the div tag I specified after the image tag, so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
{put head stuff here}
  <body width="100%" bgcolor="#4E2A32" style="margin:0px;">
    <img src="logo.gif" width="100%" />
    <div style="position:absolute;left:0px;top:0px;width:100%; padding:2em;">
{put page content here}
    </div>
  </body>
</html>

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)