Fixed background goes under footer

[joshrives]

Alright, I feel like this one should be simple but I can’t get it. This is my first time using background-attachment: fixed so I probably just don’t understand it. My fixed background is going underneath my footer when I scroll to the bottom. I want it to stop at the footer.

Relevant link: joshrives.com/blog

I’ve got a div called wrapper3 which has the background image that is fixed.

#wrapper3 {

margin: 0px auto;

padding: 0px;

width:100%;

min-width: 900px;

background: url(http://joshrives.com/josh-blog.jpg) top right no-repeat;

background-attachment:fixed;

}

Then the footer div is called colophon and it is opened after the wrapper3 div is closed.

#colophon {

border-top: 4px solid #3d3d3d;

margin: 0 auto;

overflow: hidden;

padding: 18px 0;

width:100%;

background: #3d3d3d;

}

Any ideas?

[joshrives]

The bottom of the background should stop when it gets to the footer. So the image would still be in full view, instead of the footer covering it up. I thought closing the div before the footer would do it, but it didn’t.

[joshrives]

Sorry about that, let me try to be more clear. When you scroll to the very bottom, the background image of the person slides underneath the footer. See this image

http://dl.dropbox.com/u/849394/underfooter.jpg

I would like the bottom of the background image to stop at the top of the footer and not slide under. So instead of sliding under, it would actually sit above the footer.

[GeneralKnowledge]

I don’t this is possible using “background-attachment:fixed;”
What if you use:

#wrapper3 {

margin: 0px auto;

padding: 0px;

width:100%;

min-width: 900px;

background: url(http://joshrives.com/josh-blog.jpg) bottom right no-repeat;

background-attachment:fixed;

}

@sl1dr Thanks was wondering what I was doing wrong

[joshrives]

Yes it should push up the background image

[joshrives]

Yes, the background is actually a 900px wide image with the blue on the left, but there is another div before it that fills in the blanks. I had to do that to get min-sidth to work. Otherwise the image on the left overlapped the text.

What I need is the image to be pushed up by the footer when I scroll down

[joshrives]

Very true and you might have convinced me to keep it. Though I might still try because I just want to know if it can be done after looking at it so long

[joshrives]

How about getting the min-width to work? It still pushes the picture behind the text because it is set at top right. If I put it top left it fixes the problem but it doesn’t look as good with a browser window wider than 900px

[joshrives]

Haven’t familiarized myself with @media yet, but is this right?

@media screen and (min-width: 900px) {

#wrapper3 {

margin: 0px auto;

padding: 0px;

width:100%;

min-width: 900px;

background: url(http://joshrives.com/josh-blog.jpg) top left no-repeat;

background-attachment:fixed;

}

}

#wrapper3 {

margin: 0px auto;

padding: 0px;

width:100%;

min-width: 900px;

background: url(http://joshrives.com/josh-blog.jpg) top right no-repeat;

background-attachment:fixed;

}

[joshrives]

That seems to be forcing all resolutions to the media query. I’m over 900px in my browser but it makes it top left. Do I need to declare my media query in the html header also? Not sure how that works

[GeneralKnowledge]

Just a quick note:
background-attachment:fixed; Doesn’t as if it is actually doing anything because of top right. if you where to remove it there shouldn’t be any change to the site.

[joshrives]

Ok nevermind, it should actually be @media screen and (max-width: 900px). It works now. Thanks so much for the help!

@GeneralKnowledge — if I take that out I think the background picture would scroll…I prefer it fixed so there is always something in the white space.

[joshrives]

@sl1dr I fixed it by changing to max-width…see above

Thanks again for your help and forcing me to learn media queries.

[furrball1383]

is there an article on here about using media queries or somewhere where i might learn more about it?

[furrball1383]

thanks a bunch!

[Author]

Posts