Kilian Valkhof

Front-end & user experience developer, Jedi.

Random CSS Thought: Background-z-index

CSS & HTML, 3 January 2007, 3 minute read

Right now I’m working on the new website for Fluxility Design, my webdevelopment company. In my…quest..to use as less code as possible, i ran into another random CSS thought.

Now, this one is a bit more abstract, and sort of hard to explain, so please bare with my while I try. I’d appreciate it if you would want to point out when any of my descriptions are unclear in the comments.

How it came to being

When working on the new Fluxility Design website, I wanted to use the least amount of code possible. I have rounded corners on the main content, but I didn’t want to use additional div’s to view the top and bottom background images. So I used the navigation background for the top, and the footer background for the bottom:


<ul id="nav">...</ul>
<div id="content">...</div>
<div id="footer">...</div>

And the CSS:


#nav {
	background:url("../images/nav.png") no-repeat 0 0;
}
#content {
	background:url("../images/contentbg.png") repeat-y 0 0;
}
#footer {
	background:url("../images/footer.png") no-repeat 0 0;
}

The three of these make up the visual box surrounding the actual content. the only problem was, that I had to use a negative top margin on <div id="content"> to get the content up to where I wanted it. Sadly, this caused the background of <div id="content"> to lay over the background of <ul id="nav">.

This is all logical, given the way CSS works, but it was still inconvenient. I had to use an additional div in <div id="content"> to make up for the lost background.

Background-z-index

As the name implies, this thought up CSS property would define the z-index, but only of the background of an element. This way I would be able to position the <ul id="nav"> background above the <div id="content"> background, but leaving the the actual content on top of both.

example:


#nav {
	background:url("../images/nav.png") no-repeat 0 0;
	background-z-index: +1;
}

Because <div id="content"> is placed right below <ul id="nav"> in the source, it has a z-index of 1 higher then <ul id="nav">. By defining the background-z-index of <ul id="nav"> to be 1 higher, the background of <div id="content"> gets behind the background of <ul id="nav">. But the content would still be on top of it.

Why +1, instead of using the number the current Z-index uses? This way you don’t have to find out the current background-z-index first, like you have to do with z-index now*. Instead just state that you want the background to be 1 layer higher then it’s current background-z-index.

* Unless, of course, you use z-index:99;, but that’s a whole other use.

I’m not certain how often I would need this, and I realize that it’s quite an abstract concept, but I’m certain there have been more people with this problem. What do you think, would it be a nice addition to the css toolset?

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. 1 what though? Pixel? Layer? I can definitely see the possibility for usage, but not the implementation. Of course, if CSS standardized a certain way to display backgrounds without us having to abuse margin, padding, height, and width attributes to get it to display, that would be cool too!

    Nice write-up, and again, my mind is creatively depleted when it comes to writing about CSS :O

  2. Seems like a very interesting concept.

    Maybe you should rename this blog to “What CSS is Lacking”, you always come up with such interesting ideas and concepts. Keep up the quality posts!

  3. CSS 3 *should* have multiple backgrounds, where the z-index of the background is governed by the order of the rules in the css.

    Myself I’d rather like to see background:url(“../images/nav.png”) no-repeat 0 0 1z; happening, where 1z refers to the first place in the z-index of the document. This absolute scale would give control to place background images above the content, even more than your relative scale.

  4. […] Background-z-index […]

  5. […] Background-z-index […]

  6. josh

    As long as you’re wishing for things that don’t exist in all current browsers, why not just use css rounded corners?

  7. I’m a freelance web developer. In a project I work on for my biggest client, I currently require to have two anchors (with id larr and rarr for left arrow and right arrow – to scroll the menu bar). now the script is all finished and working perfectly, only problem is to specify a background image for these links in CSS, that floats above the menu bar ul object! the li objects have background color properties – but regardless of the z-index of the anchors and ul or its scrolling span within the container div – it does not display the absolute positioned anchors’ background even in the z-index defined for them!
    it would be lovely if even that was made possible. But I must say, I like your idea a lot – it could quite possibly be the solution to my problem as well!

  8. hi again, i have resolved my issue. they can simply be resolved by stacking various divs over each other, absolutely or relatively – if you do not want to use css 3 multiple backgrounds ;)
    hope this helps someone.

  9. PPS: i still like this idea, it can greatly decrease the amount of code required when developing web pages, and for clients that have a poor connection to load.

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.