displaying an image

[ZeroShade]

I want to create an image by my navigation link. It will be on the bottom of it. But if the page scrolls down, I want the image to not stay there... that will ruin the look of the page, but almost somehow create another image of the same right underneath it. And this only does this when there is more content on the page. How can I do this?

[vchris]

I'm not sure I understand what you mean... Could you provide an example of what you want? Maybe show the website.

[ZeroShade]

Heres a really simple example, as I do not have a website yet.##########################################LinkLinkLinkLinkLinkLinkLinkLink$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Ok... so ##### is an image. Then the list of links are right below it. $ is another image. If there is more content on the page, then I want the image $ to continue down the page. How can I do that?

[vchris]

I understand perfectly, thanks for the example.Depending on the image you have underneath your list, there's different ways of doing this. I would take an image that changes to a solid color (gradient) at the bottom so all you have to do is set the background color of that div or cell to the same color. The problem with an image that doesn't change to a solid color is the image will have to end sometime but with a solid color it looks as one but in fact the image ends way before the end of the doc when it's long.Hope this helps.

[ZeroShade]

What would the css code be for doing this? And basically what your saying is that the closer the image gets to the bottom, it fades out into the background color? Am I understanding that right?

[vchris]

Yes, you are understanding this correctly. First you take your picture and create a gradient at the bottom to whatever color you wish.Then if you're working with tables for your page structure, just need to put your image in the cell and set the cell background color to the same color as your gradient. Example: background: url('images/pic.jpg') no-repeat top left #000000; } . This would create what you need. If you're working with divs and all it's a little more complicated for 100% height. You could always make the left color a background color for your container.Hope you understand what I mean.

[ZeroShade]

I'm not working with tables. I"m doing this completely with ids in css. How much more complicated is it?

[vchris]

Well if you have a main container (contains leftnav and content) then it's not that difficult. You have 2 images to create. First one is your left picture with bottom gradient. Second is same width as picture but 1 pixel height image of the color of the gradient (solid color). Then what you do is in you main container, you include this code:

background: url('images/container-bg.jpg') repeat-y left;

This will create a left column with background color. Then set your list background color to whatever you want if it's not the same color as the gradient. Then put in your image with gradient and voila!

[ZeroShade]

Thanks a lot chris!

[vchris]

Let me know if you need help.

[ZeroShade]

I decided not to use the fading technique you were speaking of and decided to use just a picture that stops when it hits the bottom of the page. I've played with it a bit, works on both Firefox and IE, but i can't seem to get the repeat right on the height. display:block; position:absolute; width:100%; height:100%; left:70px; top:565px; background:url('siding2.gif') repeat-y left; z-index:0;If i set the height to 100%, it takes the page and basically doubles it... but if I set it to a certain pixel, it repeats to that pixel... what more would I have to do to get it to repeat and stop when it hits the bottom of where the content ends without keep going?

[vchris]

that's why I hate working with % height. I never get what I want with that.Maybe this can help you:http://www.xs4all.nl/~peterned/examples/csslayout1.html

[ZeroShade]

No, that doesn't help. If I set a specific pixel value though, it repeats to that value. What else can I do with what I have?

[vchris]

Maybe if you set it as a background image and make it start at a certain height and you could also make it repeat then it would be the same height as your container.

[ZeroShade]

How can I start it from a certain height, I already have a top that puts it in a certain position?

[vchris]

http://www.w3schools.com/css/pr_background-position.aspx-pos y-posThe first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

[ZeroShade]

That does it. Perfect! Thank you again!!

[vchris]

Great!