PDA

View Full Version : Background image stretch

Incarcerated15
12-15-2002, 05:32 PM
i have an image (300 x 10) that i want to have as the background image but i want it to stretch to whatever the width of the screen is, and just repeat down
Mr J
12-15-2002, 06:15 PM
This will repeat the image in the y axis only, not sure about the stretching for background images.

You may have to resize the image so that it is wide enough for the widest screen size, and then just repeat down


<style>
BODY { background: white url(pic1.jpg);
background-repeat: repeat-y }
</style
zoobie
12-15-2002, 09:00 PM
You could use a layer and set the z value to -1 (so it's behind everything else) and then use <img src="blah.jpg" width="x" height="y"> then use availWidth telling it to repeat.

Maybe someone could finish this off. :D
Incarcerated15
12-16-2002, 08:38 PM
mr j, i know how to repeat it down, but people told me to use javascript to stretch it. zoobie might be on to something
scroots
12-16-2002, 09:10 PM
i havent figured out how to strech it but i can repeat it though, if that is any use.

scroots
zoobie
12-16-2002, 09:59 PM
Well, we now need to know how to stretch.

Try this in the meantime:

<img scr="pic.gif" width="100%" height="10" style="z-index:-1">

Someone should be able to piece it together with a stretching script found here (http://www.hotscripts.com/cgi-bin/jump.cgi?ID=15691). :D
Incarcerated15
01-02-2003, 02:21 PM
well i still don't have a way of doing it, one clever person suggested making a table and having 3 images, that is closer to what i want but it leaves a border around the table even at 100% and doesn't actually stretch the image so it's the same size on any browser
scroots
01-02-2003, 06:22 PM
you can set the table border and padding to equal zero that might fix it.

scroots
Incarcerated15
01-02-2003, 08:28 PM
i tried that- those refer to inside the table i think
scroots
01-02-2003, 09:10 PM
i crunched this inot my pc.


<table border="0" width="100%" cellspacing="0" cellpadding="0" style="position: absolute; left: 0; top: 0; width: 800; height: 600" height="100%">
<tr>
<td width="33%" background="Flag2.jpg" height="100%">&nbsp;</td>
</tr>
</table>


you will have to use javascript to make the height of the table and the width of the table the same as the users screen size. will you test the code to see if it has the desired effect (you will need to change flag2.jpg to an image or your choice which is coloured, without a boarder)

scroots
Mr J
01-02-2003, 11:36 PM
Nearly got it .......I think :(

border and z-index to sort ..............anyone?





<script language="javascript">
<!--
function init(){
maxheight=document.body.scrollHeight
picheight=10
repeatpic=Math.floor(maxheight/picheight)
doit=new Array

for(i=0;i<repeatpic;i++){
doit+="<tr><td><img src='pic1.jpg' width='100%' height='10'></td></tr>\n"
}
document.write("<table border='0' width='100%' cellspacing='0' cellpadding='0' style='position:absolute;z-index:-1'>")
document.write(doit)
document.write("</table>")
}
setTimeout("init()",2000)
// -->
</script>
Incarcerated15
01-03-2003, 02:31 AM
mr J you seem to be on to a good idea but it puts the background in front of everything and leaves a white border around it

scroots- that might work if i fixed it up a bit
Mr J
01-03-2003, 06:08 PM
I have revised the script.
In order to keep everything in front all the body contents have to be place in a div.

Have managed to get rid of the white border to some degree but this means the bottom scrollbar appears.

Take a look and see what you think.

When copying from below make sure the following line

document.write("<table border='0' cellspacing='0' cellpadding='0' style='position:absolute;left:0;top:0;width:103%;z-index:-1'>")

is all one line, as I copied it back into my editor to check and got an error because it was not rendered correctly in here.
The line was split at z ........-index.



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">
<!--
function init(){

oDIV=body_contents.innerHTML

maxheight=document.body.scrollHeight
if(maxheight<500){
maxheight=500
}

picheight=10
repeatpic=Math.floor(maxheight/picheight)

doit=new Array

for(i=0;i<repeatpic;i++){
doit+="<tr><td><img src='pic1.jpg' width='100%' height='10'></td></tr>\n"
}
document.write("<table border='0' cellspacing='0' cellpadding='0' style='position:absolute;left:0;top:0;width:103%;z-index:-1'>")
document.write(doit)
document.write("</table>")
document.write(oDIV)

}
setTimeout("init()",1000)

// -->
</script>
</HEAD>
<BODY>

<div id="body_contents"><center><h1><font color="gold">Stretching</font></h1></center>
<P><font color="yellow">The background will stretch along the x axis and give the appearance of being repeated on the y axis</font>
<P><font color="red">All BODY contents have to be contained within an identified DIV.</font>
</div>

</BODY>
</HTML>
zoobie
01-03-2003, 06:47 PM
Why is it set @ 103%? Can't we just shut off the overflow and do away with the horiz scrollbar?

I believe this is a first because I've never seen the answer to this question that's been asked in several forums. :D
Mr J
01-03-2003, 08:13 PM
If you shut of the scrollbars you would have to include functions to scroll the div if longer than the window height

.........................


I think

but .......


I might just do that to see how it works

:D
Incarcerated15
01-03-2003, 08:37 PM
well that is the best yet except few minor things, the page extends way to far down and some stype script and link colors changed
Mr J
01-03-2003, 08:57 PM
The script is still in the experimental stages.

When I tried to get the page height (document.body.scrollHeight )
with only two lines of text I got a value of 49.

So I decided to give it a default value if the contents on the page were less than the window height

You can alter the default height by amending


if(maxheight<500){
maxheight=500
}

change 500 to whatever

If the page is longer than the window height the script should adjust the background to suit.

This also means that the scrollbars are needed but I am trying to get rid of the bottom scrollbar by scrolling a layer via script.

Unfortunately I am having a bit of difficulty getting a div to scroll that has been document.written, the function is not being recognised from the link within the document.write.


aaarrrrggghhhhhh!!
zoobie
01-03-2003, 10:10 PM
Try .availHeight maybe...
Incarcerated15
01-04-2003, 12:38 AM
isn't there a script or command that gets rid of the bottom scroll bar?

my page was so long because maxheight was more than 500 so it wasn't affected so i shortened it

do you know why the other scripts were messing up?
Mr J
01-04-2003, 11:44 AM
Boy is this a brain teaser or wot

I corrected the bottom scrollbar prob ... I think ....but now if the pic is a height of 10 the top part of the page does not render onload.
At a height of 20 it's ok.

aarrgghh!!!!

have a play
Incarcerated15
01-04-2003, 06:50 PM
but the image should be made to repeat enough tims to get to th end of the document otherwise it would only work under one size and then you might as well have an image of that size as the background
Mr J
01-04-2003, 07:15 PM
The image does repeat enough times to get to the end of the page regardless of length.

One initial problem was if the page was shorter than the window height *, thats why I put in a default minimum height.

If you look at my last effort you will see that I have amended this.


*One line of text would be classed as the page height
Incarcerated15
01-04-2003, 09:38 PM
oh i was looking at the source of the page after i opened it
that does some weird things to the page, which is why the scripts weren't working. it makes everything look how it does after the page has been opened. do you know how to change link colors with that? it changed the <body> part so it isn't there

that script doesn't reach the botom of the page
or resize with the window, but that might be impossible
Mr J
01-04-2003, 11:06 PM
I am puzzled when you say it does not reach the bottom of the page.


I have tried different amounts of text which entail scrolling down to get to the bottom of the page, and in each case the background has aways been rendered to the bottom of the page irrespective of how long it is.

It is possible to change the link colours but it seems that everything other than the script has to be placed in the "body_contents" div so that it can be rewritten when the script runs.

I did notice the resize problem unfortunately I have no solution to date.


I attach the actual file that I am working with.
Incarcerated15
01-05-2003, 03:06 AM
i don't know what was causing it to go only partly down, but i fixed it and the link colors and other scripts so they all work fine

the only thing's that happen are that the page doesn't render like you said in some resolutions, and when i hover over links i getthe top of the page overlapping the current part neither of those have to do with problems in the script though and i'm not so sure that it isn't just my computer
Mr J
01-05-2003, 11:54 AM
Attach a copy of the actual page you are using so I can take a look.

It goes all the way down on my browser with no problems
Incarcerated15
01-05-2003, 05:53 PM
it's everynow and then when you hover over links around the page, and it goes to the bottom on mine now too
Website (http://www15.brinkster.com/poplinks)
Mr J
01-05-2003, 10:30 PM
Incarcerated15


I went to have a look at your page and it looks good but ......

The background did not go all the way down so ....

I looked at the source code and ..... aaarrrgghhhhh!!!!!! .....

oh dear .... how has it been written? .....

Have you altered the attributes in the document.write


Something is wrong somewhere.

I copied the code from your page and pasted it into my editor and nothing came up becuse there is a space between every single letter in the coding.

I could not get to the original code because it is over-written when the script runs.

zip the file and attach it here
Mr J
01-06-2003, 06:37 PM
Incarcerated15

Having visited your site and seen the effect you are after, I realise now that I was going about this totally in the wrong direction.
I have at last come up with a solution for the effect you want.

The left and right sides of your image are cropped and saved as seperate images

popleft.jpg and popright.jpg

A table is created to fill the height and width of the page.
The table is given a background colour of black

The table has four columns.

All the TD cells in the first column have popleft.jpg as the background.

The second TD cell is used purely for spacing

The third TD cell is for your contents.

All the TD cells in the fourth column have popright.jpg as the background.

In order to get the table to stretch to all sides

leftmargin="0" topmargin="0" must be included in the opening BODY tag

The following is a template for a complete row.


<tr>
<td background="popleft.jpg" width="60"></td>

<td width="20">&nbsp;</td>

<td><br><!-- USE THIS TABLE ROW AS YOUR TEMPLATE AND PLACE YOUR CONTENT HERE --></td>

<td background="popright.jpg" width="60"></td>

</tr>

Using this method no script is required and you can code as normal

I have redone your page using this method and attach it here
Incarcerated15
01-07-2003, 12:36 AM
i actually posted a link on the page to a copy of the source at the bottom
*looks back at posts talking about tables with two seperate images* - if i had just known about <body> size changes we wouldn't have needed to go through all this
oh well, if you look i put a revised version of what you made up