Kilian Valkhof

Random CSS Thought: Background-z-index

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 a new 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 divs 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?