CSS3 – Still Missing Functionality… on Purpose!
Last night I was working with Consummo to build a client’s website and I ran into a stumbling block. CSS3 does not allow for colors to be declared alongside images (except as the last value). What does this mean? A website can have several background images, each with or without transparency, and a background color behind all of it. Personally, I assumed (you know what they say about assume) background colors could be defined on top of background images (in the same element), but I was wrong. In the CSS3 Candidate Recommendation, the background shorthand property can have a value as follows: [ <bg-layer> , ]* <final-bg-layer> where color can only be defined in the place of <final-bg-layer>.
This isn’t needed – background colors would cover the images!
Five years ago, this argument may have been true, but now we can declare a background color (or any other color) with RGBA. This makes it possible to set a background color with any opacity. Just imagine the possibilities! No longer do you have to edit an image to make it darker or lighter. A simple change in the RGBA background over the background image would take care of this for you. But wait, why not just change the image so you don’t have to worry about it? Well, mainly because this could lead to multiple images in the long run. For example, one may want to use the same background image for multiple elements, but with different hues. Another possiblity would be to use a box-shadow (when they re-release it) on one element while using a RGBA background on another element. It may sound like I’m just making a point to use CSS3 in every way possible, but it really is applicable in the real world. Actually, both of the examples provided I have used (or wanted to use) in the past month.
Are you Proposing a Change?
Absolutely! It’s simple too! Simply change it from Value: [ <bg-layer> , ]* <final-bg-layer> to Value: [ <bg-layer> , ]* <bg-layer>.
Tags: background, CSS3, multiple backgrounds
January 4th, 2010 at 8:50 am
Worst case, you can hack around this by using gradients – linear-gradient(rgba(0,0,0,.2)) will produce a solid-color image. Getting used to using this is a plus anyway – you can do some cool things by shading with a gradient on top of an image. It’s slightly more verbose than just using a color, but shrug.
January 4th, 2010 at 9:00 pm
Aye, that is what I’m planning on doing (haven’t tested it yet, but assuming it will work). I’m making extensive use of linear-gradient on a client’s website as a matter of fact. Two images (which could, in reality, be one) for the entire thing, yet it looks as if 90% of the layout is in images. It’s amazing how much time (and bandwidth) CSS3 saves.