Web / CSS (?) gurus

[Bacon]

Here's the situation:

I need a background image in a div, and i want it to scroll normally with the page, but when you scroll far enough down the bottom of the image is seen, i want the image to stop scrolling, but the page still scrolls. Basically a "fixed" position but only after you've scrolled far enough to the bottom of the image. Is something like this possible with css or something? I took a look at a bunch of css properties like background and stuff but there's nothing there I can seem to find that will help me with what I want to do.

Thanks guys

P.S if you want to see "sort of" an example of what I mean, go to a google code page (like a revision page with comments), as you scroll to the bottom, the div on the left stops scrolling once you get to the bottom but the right side of the screen keep scrolling. That's basically the effect I need but with a background image in a div.

Edit: Sorry it's a table and not a div, not sure if that matters, but heres the code:

Code: Select all

<table width="779" border="0" align="center" cellpadding="10" cellspacing="0" class="wrapper">

and the wrapper class in my css file:

Code: Select all

.wrapper {
	background-image: url(images/background.jpg);
	height: 1118px;
	width: 779px;
	background-repeat: no-repeat;
        background-position:top center;
}

I'd post the actual page that has it but I don't think i'm allowed to because rom images are linked all over the place

[MKJ]

if youre not using tabular data, you want to ditch the table and use a div instead. this because different browsers handle table backgrounds differently. so choose the predictable route - a div.

as for the actual question - im not too sure if i understand - but background-position will help you a long ways. if you want it to scroll along until (for some reason) you dont want to anymore, flat css isnt going to help you. look for a js solution, e.g. something that determines the viewport and changes the background-position value when it exceeds a certain number.


my advice is to be pragmatic. is this really the solution to what your problem is? or is it fixable by some other means like circumventing or changing the semantic structure of the page.

im kinda shooting solutions here to a problem i havent seen, so uploading it somewhere for us to see will help us help you ten times better.

[Bacon]

I can't use a div because its a message board. I want the background to stop scrolling because its only like 2000 px tall, so when you get to the bottom of most of the forum pages, its just black space. Hope that makes more sense. I want the image to stop but the page to keep scrolling so theres no black space at the bottom

It is already uploaded but like I said I dont think i'm allowed to post it here because of some of the content on it.

Ill start doing some research into doing it with javascript I guess, or just try and find a nice tiled background or something

[obsidian]

I want the background to stop scrolling because its only like 2000 px tall

This, plus everything else tells me that maybe you should rethink how the content on your website works. 2000px background images and tables that aren't tables and forcing javascript to do something like dynamically place images on your page isn't exactly an ideal solution for something as superficial as having a background image in the first place. Maybe you should simplify whatever you are trying to do and stick to the basics before you end up with a bloated mess.

[MKJ]

^ that
is what i meant when i said you should be pragmatic.