HTML Background Image

Adam · 03-07-2006 9:49pm #1

Hopefully there's an easy enough answer to this but for all my googling all I can seem to find is sh1te results!

I just want to know how I can set an image as a background to an entire page, which will resize to the dimensions of the individuals browser, so there are no scroll bars etc.

Its just a temp thing at the moment, before a debate background images ensues!

seamus · 03-07-2006 10:17pm

Adam · 03-07-2006 10:25pm

Alas no, that just plonks the picture in the page, it doesn't resize it at all!

seamus · 03-07-2006 10:29pm

Oh resize, missed that.

Not sure. You may have to embed some javascript use the onLoad and onResize handlers (if the latter exists) to dynamically resive the image.

Adam · 03-07-2006 10:32pm

I was thinking i ight have to do some such... :rolleyes: Its never simple is it!

Anyone have any idea how this might work?

DonkeyStyle \o/ · 03-07-2006 11:42pm

I was curious about this myself, so I kinda fudged something together that seems to work.

<html>
<head>

<style type="text/css">

  body 
   {
     padding: 0;
     margin: 0;
   }


  #mybgimage 
   {
     width: 100%;
     height: 100%;
     float: left;
     z-index: 1;
     position: absolute;
   }
  #mybgimage img
   {
     float: left;
   }   

  #content
   {
     margin-top: 15px;
     z-index: 2;
     position: absolute;
     width: 60%;
     left: 20%;
     border: 1px solid #000;
     background-color: #FFF;
   }

</style>

</head>

<body>

<div id="mybgimage">
  <img src="my_image.jpg" width="100%" height="100%">
</div>

<div id="content">
   <p>Niiiih, spork? <br> OMG</p>
</div>

</body>
</html>

Wouldn't count on it validating though on account of the width and height attributes in the img tag... don't think even html4 transitional allows those, but what can ye do :rolleyes:

seamus · 03-07-2006 11:53pm

Nice thinking DS.

Surely you can set a style for the img (give it an ID), and set the height and width attributes there to make it validate?

DonkeyStyle \o/ · 03-07-2006 11:57pm

Oh yeah, that works... splendid stuff old chap.

Here's the validatable version...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Splendid old page indeed!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

  body 
   {
     padding: 0;
     margin: 0;
   }


  #mybgimage 
   {
     width: 100%;
     height: 100%;
     float: left;
     z-index: 1;
     position: absolute;
   }
  #mybgimage img
   {
     float: left;
     width: 100%;
     height: 100%;
   }   

  #content
   {
     margin-top: 15px;
     z-index: 2;
     position: absolute;
     width: 60%;
     left: 20%;
     border: 1px solid #000;
     background-color: #FFF;
   }

</style>

</head>

<body>

<div id="mybgimage">
  <img src="my_image.jpg" alt="">
</div>

<div id="content">
   <p>Niiiih, spork? <br> OMG</p>
</div>

</body>
</html>

Pfff javascript indeed

Adam · 04-07-2006 12:01am

Nice one lads, cheers!

Gordon · 04-07-2006 7:10am

Now I think we can get onto the topic of why on earth you want a resizable background image...

Ph3n0m · 04-07-2006 8:45am

heh, now do it without absolute positioning

DonkeyStyle \o/ · 04-07-2006 1:27pm

Gordon wrote:

Now I think we can get onto the topic of why on earth you want a resizable background image...

Yus, post linkies tbh. o_O

Ph3n0m wrote:

heh, now do it without absolute positioning

No, only Chuck Norris can do that.

Adam · 05-07-2006 1:33pm

www.cavanrock.com

Its under construction

HTML Background Image

Comments