Repeating an image along the bottom of the page without setting it as background.

[imagius]

(the original content of this post was different, I have edited it for clarity... I hope.)

I've found a better way to phrase my previous question in this thread and did not want to make a new thread about it. What I need to do is set a repeating image as a background for my main content div, my left nav div, and my footer. The image in each of these will be a different image. I also need to set one for the entire page background on which the other divs "sit". For example, lets say I want my blank page to be yellow, the whole thing. Now I create a div which has my nav in it, but I want the nav background to be blue, my footer to be green, and my content div to be purple. Now replace the colors with well designed patterns that need to repeat infinitely from a small seamless image so they load faster.

Hopefully this gives everyone a good idea of what I am trying to do.

(ps, I decided that I do need to do this after seeing my design complete without these things, sorry for being a pest.)

[BGarner]

Like a footer?

You can do it with a background image. Just create a div and then add...

Code: Select all

position: absolute;
top: 100%;
background: #fff url(your image url) repeat-x;

Let me know if that's what your looking for.

[snow]

background-image is still the CSS you're after, only on another element such as a div...

So just create an empty (or not) div at the bottom of the page, such as:

<div id="footerImage"></id>

then in the CSS:

#footerImage {
height:55px; /* Or whatever your cloud image height is */
background:blue url("clouds.jpg") repeat-x;}

I haven't given this too much thought, so I hope it's something like, or at least helps!

Snow

[snow]

Ack, BGarner, you got in before me!

People are just far too willing to help on this site!

[imagius]

What Snow posted almost works, it repeats but not to the edge of the page (it stops a few pixels before the end, i think it is because it did the maximum number of repeats without cutting the image off at all, I do not care if the image is cut off) and its right in the middle of the page, not on the bottom. I'm going to try to align it now but if someone gives me that info too I'll probably need it

[snow]

have you got the site online at the moment? It'd be good to have a link as I'm a bit rusty with my CSS and a page to play around with would be handy!

[imagius]

Actually, I just came back to post that it really doesn't matter as I decided to scrap the first background image entirely and with that being gone the second one is very easy to implement for me. Thank you all very much though!

[moojoo]

just a fyi because I suck like that

<div id="footerImage">&nbsp;</id> Would be correct tee hee

[imagius]

I've found a better way to phrase my previous question in this thread and did not want to make a new thread about it. What I need to do is set a repeating image as a background for my main content div, my left nav div, and my footer. The image in each of these will be a different image. I also need to set one for the entire page background on which the other divs "sit". For example, lets say I want my blank page to be yellow, the whole thing. Now I create a div which has my nav in it, but I want the nav background to be blue, my footer to be green, and my content div to be purple. Now replace the colors with well designed patterns that need to repeat infinitely from a small seamless image so they load faster.

Hopefully this gives everyone a good idea of what I am trying to do.

(ps, I decided that I do need to do this after seeing my design complete without these things, sorry for being a pest.)

[motlive]

Put the background image in your body{} tag and then using the background-image for your other divs you can set the background.

background { #FFFFFF url ('image.png') repeat;}

at a guess