Jump to content



Photo
- - - - -

Stretching an image to fit full page


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1   wayne miller

wayne miller
  • Members
  • 35 posts

Posted 12 October 2011 - 22:41

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

Attached Files



#2   wayne miller

wayne miller
  • Members
  • 35 posts

Posted 12 October 2011 - 22:55

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

Edited by wayne miller, 12 October 2011 - 23:02.


#3   wayne miller

wayne miller
  • Members
  • 35 posts

Posted 12 October 2011 - 23:31

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?

Edited by wayne miller, 12 October 2011 - 23:32.


#4   wayne miller

wayne miller
  • Members
  • 35 posts

Posted 12 October 2011 - 23:53

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

#5   wayne miller

wayne miller
  • Members
  • 35 posts

Posted 13 October 2011 - 13:37

Anybody help, I really want to get this cracked tonight?

Edited by wayne miller, 13 October 2011 - 13:38.