Solved: background stretch

Duckman69 · 07:35 AM

i hate to break my vow of silence so soon lol, but i promise no more stupid posts... i been playing with stretch background for the last 90 minutes or so and im having a bit of trouble 1st i tried code1 then code 2...

Code 1 gave me the option to put text but not flash content on the page using #content... then i found code2 which did the oppsite, flash content was showing and the text & java script text scroller dont show... when i mixed the #content function in with the new code my page appears 100% and the way i want it only about 70% in width for some reason...

code 1:

header::

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%; allowtransparency="true";}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>


call ::
<div id="bg"><img src="background.gif" width="100%" height="100%" alt=""></div>
<div id="content">

code 2:

header::

<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%; allowTransparency="true";}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
#content {position:relative; z-index:1;}
</style>

call:

<img id="background" src="background.gif" allowTransparency="true">

allow transparency didnt do anything its just there from things i was trying... maby some1 knows a easier way to do this or a way to refine the code properlly

http://www.freewebs.com/fallingrain11/22.html heres what it looks like right now... i can make a page for the other 2 outlooks to help give a better idea if necessary...

Duckman69 · 18-Aug-2007, 09:45 AM #2

Best code i have seen for this is below incase any1 else would like to take use of it, after extensive reading i've realized that there isnt really a way to do this properlly it has to be faked so to speak, or you can makea script to recognize each screen resolution and set a picture for each if statement...

There is a php script i found like this but it works half assed... and didnt cover the whole screen bottom part was off about 20% on both pages i tried on... so here is the script that worked for me, i did have a issue with a image of about 200 x 200, but i used a bigger picture and it works on all 3 monitors i have all resolutions and in all browsers...

<html>
<head>
<style type="text/css">
body{margin:0;}
</style>
<title>Stretch and Refresh Background Image via javascript and css</title>
</head>

<body>
<script>
var origWidth, origHeight;
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
if (document.layers) {
origWidth = window.innerWidth;
origHeight = window.innerHeight;
onresize = function() { if(innerWidth != origWidth || innerHeight != origHeight) location.reload(); }
}
else if (document.all) onresize = function() { window.location.reload(); }
document.write("<DIV STYLE=z-index:0;position:absolute;top:0;left:0;height:");
document.write(winHeight);
document.write(";width:");
document.write(winWidth);
document.write(";><IMG SRC=Images/ppx.jpg HEIGHT=100% WIDTH=100%></DIV>");
</script>

<div style="z-index:5;position:absolute;top:0;left:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center">Content Area</td>
</tr>
</table>

</div>
</body>
</html>

tomdkat · 18-Aug-2007, 11:30 AM #3

It's funny you learned about setting the image width to a percentage instead of using pixels since I did just that the other day on another project.

Here is a simple example using a table that does the same thing as your code but doesn't involve any javascript:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>stretch</title>
</head>
<body>
<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="height: 150px; width: 100%; text-align: left; vertical-align: top;">
        <img style="width: 100%; height: 100%;" alt="Background image"
 src="banner-top.jpg"><br>
       <div style="display: block; z-index: 3; margin-top: -110px; text-align: center;">
          <img style="width: 481px; height: 65px;" alt="Foreground image"
 src="Best-1.gif"><br>
      </div>
      </td>
    </tr>
    <tr>
      <td style="height: 300px;">Here is some text</td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

Peace...

Duckman69 · 19-Aug-2007, 06:17 AM #4

thanks tomdkat im gonna give that a shot because actually i have a small issue with the scrpt i was using its something i could have lived with but ill give your script a try thanks for the reply

Duckman69 · 19-Aug-2007, 06:50 AM #5

not reading the code before i put it in didnt realize thats for the banner issue i posted about for stretching a banner image and putting another image in center of that, thanks for the code thought im gonna repost it in hte other forum for future reference

Search
Search in:
Show Threads Show Posts
Advanced Search

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