Fixed element and bg image

HTML & CSS
1

Hello,


body {
background: url(bg.jpg);
}

#nav {
position:fixed;
background: #fff; /*???*/
}

Obviously, the background color for #nav gives an ugly result. It should also have the same background as the body.

Problem with background: transparent, when the page is scrolled down, everything that is displayed becomes visible behind #nav.

An ugly result, too.

Is there a way to avoid that? To tell #nav to display only the body background?

Regards,

-jj.

:slight_smile:

2

What about

#nav {
background: url(bg.jpg);
}
3

Yes, it works, but I was wondering if there was a more elegant solution (and more maintanable).

:slight_smile:

4

Surely you jest! What could be more elegant or maintainable than applying a background image to a single element?

5

Agreed—it is a very simple, reliable and elegant solution. I’m not sure what worries you about it, or what’s not maintainable about it. If I use the same bg image on two elements, I’d do this:

body, #nav {
  background: url(bg.jpg);
}
6

You then have to change two bits of code. But I guess indeed that’s ok. :slight_smile: :slight_smile:

Now: what if the body bg is a huge image? Obviously using the same bg img on a smaller size-wise element will be ugly.

7

Not sure what you mean.

Now: what if the body bg is a huge image? Obviously using the same bg img on a smaller size-wise element will be ugly.

Then why are you using it on the smaller element? If the bg image is larger that the smaller element, only part of it will show anyway, so it won’t do any damage.

8

It’s a stacking problem:

order:

0: huge body bg image (no repeat, goes beyond screen)
1: various divs and elements composing the content
2: element with position fixed (which stays visible even when scrolling)

In other words:


body {background: url(huge.jpg);}
#main {...}
#aside {...}
#footer {...}

#sticky {position: fixed;}

Things to consider:

The width of the body bg image is bigger than screen. So when you scroll down the page, new portions of the image get visible.

Elements such as #main scroll behind #sticky (which is no surprise since #sticky is fixed).

For #sticky to display the body bg image, its background has to be transparent. Which causes a problem: all the elements such as #main become visible along with the body bg image once they get behind #sticky.

If I set the same body bg image to #sticky, the result isn’t pleasant as it’s obvious that we’re not seeing the huge body bg image scroll, but a smaller version of it which doesn’t move upon scrolling.

My question: could #sticky show the body bg image, and only it, while ignoring the elements moving behind it when they move behind it?

:slight_smile:

9

Use a fixed position image on the body and the same fixed position image on the nav.

No matter where the nav is it will always display the same portion of the body background that is sits on as fixed images are relative to the viewport at all times. It will be a seamless join and scrolling text will pass underneath the nav and not be visible


body {
	background:url(images/stripebg.gif) fixed;
}
#nav {
	position:fixed;
	background:url(images/stripebg.gif) fixed;
	width:300px;
	height:300px;
	border:1px solid #000;
}

(Position:fixed is not supported in IE6)