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 whi…
Background-repeat is an often used method of making smaller images possible while creating a filling background. But in my eyes it is far too limited. You could do much more with it:
To make these you have to make an image with at least 4 blocks, and then repeat that. What if you could control the space between each repeating image, in the x and y direction? Lets assume we use a 20px by 20px black image:
.foo {
background-color: #ffffff;
background-image: url("one-block.gif");
background-position: 0 0;
background-repeat: 20px/20px repeat
}
background repeat would take this form: background-repeat: direction x-spacing/y-spacing
. So the above would position the image in the top left corner, skip 20px in both directions, and repeat it again. Effectively creating a nice checkerboard pattern. (Black and white, in this case.)
When you have a repetition in one direction (repeat-x
or repeat-y
) then you would also need only one spacing value. Lets assume we’re going for a stripy blue/light blue background here:
.bar {
background-color: #ddddff;
background-image: url("slightly-darker-blue.gif");
background-position: 0 0;
background-repeat: 20px repeat-y
}
This would create horizontal stripes, each 20px apart vertically. This code would work with a fixed-width container and an image with the same width. But by using both spacing options, we can make it width independent:
.bar {
background-color: #ddddff;
background-image: url("slightly-darker-blue-but-smaller.gif");
background-position: 0 0;
background-repeat: 0/20px repeat
}
This time, the image repeats in all directions. Horizontally without spacing, and vertically with 20px apart.
most people use the background:
shorthand property, so it would have to work nicely with the shorthand too. And it does:
background:#ddf url("slighlty-darker-blue-but-smaller.gif") 0/20px repeat 0 0;
Doesn’t take away anything from the readability, does it? Of course, the default repeat spacing would be 0/0
.
With the multiple background possibility in CSS3, this would get even more interesting:
.foo {
background:#ddf url("red.gif") 20px/20px repeat 0 0,
url("green.gif") 20px/20px repeat 10px 10px,
url("blue.gif") 20px/20px repeat 20px 20px;
}
I’m sorry that you have to imagine a background like that (I truly am), but it serves the general idea perfectly. The code above creates a red/green/blue checkerboard pattern, and allows you to be even more flexible with your backgrounds. Just think of combining this with alpha-transparent png’s. Diagonal stripes just got easier :)
Would this make your life as a CSS developer easier? Please share your thoughts in the comments.
Other CSS thoughts
If you enjoyed this article, please consider reading any of my previous CSS thought articles:
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 whi…
Equal Height columns have been (one of) the holy grail('s) of webdevelopment for quite some time. Making columns look balanced can be a struggle sometimes. There is of course the r…
Vertical floating is an idea I've had for some time now, but only recently really had a need for. Float:left; and float:right; are often used to float images or clear certain parts…
I’d love to see this in CSS3!
I’m also looking forward to the fact that you can have multiple backgrounds on CSS3; the only problem is compatibility with browsers, it will take way too much time for users to upgrade!
[…] Advanced background repeat options […]
[…] Advanced background repeat options […]
Is there a way in which i can make an image repeat from point x,y onwards only in direction x to the right (and not right and left like it does right now)? ?
Thanks!
Hi,
I tried above CSS but its not showing me what you have written. Is the above thing u assumed that it will be implements in future CSS version? or do u have any demo.html page to show this is working?