Issue with full-page background

[maggies]

For my portfolio site that I’m working on, I have a large white header at the top with a 45-degree-rotated box coming from the bottom (it’s supposed to look like a speech bubble).

Under that, I have navigation and content. I want the background of this section to have a large image background. Right now, I’m using a div with a class of main-page-bgwith an image for the background, with all the navigation and content inside of it.

However, the background is not behaving how I would like it to. First of all, I want it to be flush with the white header. Second, I would like the background to “start” at the bottom of the white header, and when I scroll, it would move up to the top of the window, filling the page.

Another way of putting it: I want the top of this background to “stick” to the bottom of the header.

Right now, it’s essentially hiding the top part of the photo until I scroll past the header. I can’t figure out how to get it to do what I want, and I feel like I’ve tried everything.

I’m willing to use jQuery if I need to, but I’m not super proficient in it so I would prefer to use CSS if possible (and I feel like this is something that can be solved with CSS).

Here’s a pen: http://codepen.io/anon/pen/Jpcfv

I know that description is a little confusing, but any help would be great!

[Paulie_D]

However, the background is not behaving how I would like it to. First of all, I want it to be flush with the white header. Second, I would like the background to “start” at the bottom of the white header, and when I scroll, it would move up to the top of the window, filling the page.

There some conflicting things going on here.

The image is bg of your content div which sits below the header and the nav so you have to find some way of pulling it up.

Is the menu supposed to have that grey background (which is actually the body background color)?

I think it’s possible that we could lose the ‘bubble’ div altogether and replace it with a pseudo element..that might make things a little easier.

[Paulie_D]

Ok…I tinkered a bit.

I stripped out the styling ‘bubble’ div and replaced it with a pseudo element.

Moved the nav inside the ‘main-page-bg’ div and so now the image butts up nicely against the header as required.

Oh and I changed the height of the header to a fixed value as 40% didn’t really make sense (to me)…but it can be any value you want.

If a background is required to the menu that’s another issue.

http://codepen.io/Paulie-D/pen/KmkEB

[Kingslayer]

i just added

position:absolute;
background-attachment:scroll;

to .main-page-bg

http://codepen.io/anon/pen/eqbzw

as far as i understood this is whats is supposed to happen ?

codepen: anon/pen/eqbzw

[maggies]

Thank you guys! However, it’s still not quite what I’m trying to achieve.

Paulie_D: No, I wasn’t meaning for the nav to keep that gray background, but when I tried to get rid of it using a negative top margin, it screwed with the height of the header.

I like the pseudo element idea (makes way more sense :P )!

I should’ve mentioned that I tried the same thing you did (putting the nav inside the .main-page-bg) but the top of the background still doesn’t “stick” to the bottom of the header.

I’m going to have a photo of me there eventually, and my issue is that I don’t want my face to be cut off initially (the skater guy’s butt is cut off now, until you scroll down past the header).

Kingslayer: That’s closer to what I’m wanting, but I would like the background to be fixed so that when I continue scrolling down the page, the text scrolls nicely over the background.

Getting closer, thanks for all your input!

[Kingslayer]

So for me to get it right. You want the image to be fullscreen and stay as soon as the header is out of the visible area ?

[Paulie_D]

Hmm…we’re verging into areas now where I think we’ll need Javascript/JQuery.

This is a little closer http://codepen.io/Paulie-D/pen/ocuJg

I moved the bg image to the body since that’s what it seems is required and positioned it a distance from the top roughly equal to the header height.

When the scroll happens the image stays in place but at present this leaves a gap at the top.

We need a solution for that which is where I think the JS/JQ would be needed **unless your intended image could have that amount of extra space at the top anyway. then it’s a done deal.

[maggies]

Kingslayer: yes, that is basically the gist of it.

Paulie_D: This is where I got stuck too. At least now I know that I wasn’t just missing something in the CSS! I’m going to look into a JQ solution, and if I can’t figure something out with that, I’ll just use a photo with a decent amount of space at the top.

Thanks for your help!

[Author]

Posts