Kilian Valkhof

Random CSS Thought: Background-z-index

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?