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>.