Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stretching an image to fit full page


wayne miller

Recommended Posts

HELP HELP HELP!

 

I found the code below somewhere on the tinternet and have been trying to put it to use in my body text in my CSS Stylesheet:

 

Im trying to get an image I have to work as the background and auto resize to the browser size

 

you can paste the code into notepad and save it as HTML file then double click to see the output (IVE DONE THIS AND ATTACHED THE FILE)

 

Can anybody help me to chop this about a bit to work?

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Stretched Background Image</title>

<style type="text/css">

/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */

html, body {height:100%; margin:0; padding:0;}

/* Set the position and dimensions of the background image. */

#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */

#content {position:relative; z-index:1; padding:10px;}

</style>

<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->

<!--[if IE 6]>

<style type="text/css">

html {overflow-y:hidden;}

body {overflow-y:auto;}

#page-background {position:absolute; z-index:-1;}

#content {position:static;padding:10px;}

</style>

<![endif]-->

</head>

<body>

<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>

<div id="content">

<h2>Stretch that Background Image!</h2>

<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>

<p>Go on, try it - resize your browser!</p>

</div>

</body>

</html>

index.html

Link to comment
Share on other sites

Ive also found this but I cant find page.tpl.php ?

 

open page.tpl.php

 

Insert this code, straight after the body tag

 

<div id="bg_image"> <img style="width: 100%; height: 100%;" src="images/scenery.jpg"/> </div>

 

Just replace the img src with your own image.

Then put in an opening div tag

 

<div id="contents">

 

and put a closing div tag

 

</div>

 

just before the

 

</body>

 

tag

 

Then put this

 

#bg_image {width: 100%;height: 100%;left: 0px;top: 0px;position: absolute;z-index: 0;}#contents {position:absolute;z-index:1;}

 

into your style.css file.

 

This is copied DIRECT from the example provided, no testing...

Link to comment
Share on other sites

Right!

Ive added this to my CSS Style sheet above Body

 

#bg_image {
 width: 100%;
 height: 100%;
 left: 0px;
 top: 0px;
 position: absolute;
 z-index: 0;
}

 

And Ive added this to the very bottom of Index.php

 

<div id="bg_image"> <img style="width: 100%; height: 100%;" src="images/wood.jpg"/> </div>
<div id="contents">
</div>

 

My image is now stretched across the entire page as I wanted! . . . . . . . . . . however the rest of my site is behind the image!

 

Im guessing that I have this in the wrong place

 

<div id="contents">
</div>

 

 

Im thinking that I should have this above and below the part of my site thats now hidden but where?

 

Anybody help a struggling newbie?

Link to comment
Share on other sites

OK Ive currently come up with this . . . . .

 

Put this in the bottom of index.php

 

<div id="bg_image"> <img style="width: 100%; height: 100%;" src="images/wood.jpg"/> </div>

 

Put this above Body in the CSS Stylesheet

 

#bg_image {
 width: 100%;
 height: 100%;
 left: 0px;
 top: 0px;
 position: absolute;
 z-index: -1;
}

 

Its now working as I wanted however its only on the home page!!!!!

 

Can someone put me out of my misery?

 

I want the image to be the background for all of my pages

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...