# Solved: background stretch



## Duckman69 (Jun 26, 2007)

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



call ::









code 2:

header::

call:










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 (Jun 26, 2007)

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

Stretch and Refresh Background Image via javascript and css


Content Area


----------



## tomdkat (May 6, 2006)

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:

```
<!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 (Jun 26, 2007)

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 (Jun 26, 2007)

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


----------

