Zelaron Gaming Forum - Resizing background image

Zelaron Gaming Forum (http://zelaron.com/forum/index.php)

- Tech Help (http://zelaron.com/forum/forumdisplay.php?f=329)

- - Resizing background image (http://zelaron.com/forum/showthread.php?t=34217)

Medieval Bob

2004-10-29 12:00 PM

Resizing background image

How do you resize a background image with HTML?

Silverjinx18

2004-10-29 12:04 PM

I've already asked that.

Medieval Bob

2004-10-29 12:08 PM

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

WetWired

2004-10-29 01:13 PM

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.

Medieval Bob

2004-10-29 01:37 PM

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?

WetWired

2004-10-29 02:48 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.

Silverjinx18

2004-10-29 03:37 PM

ok ... this isn't working :(

WetWired

2004-10-29 03:47 PM

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

Silverjinx18

2004-10-29 03:51 PM

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...

WetWired

2004-10-29 04:05 PM

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>

All times are GMT -6. The time now is 07:38 AM.