CSS4 - background z-index

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I was working on a project and had a thought. With more and more web designers using rgba rather than rgb, it'd be kinda cool to see a new property for backgrounds added to the spec for css4 wherein you could define the order of the background layer stack.

So you could do something like this:

CSS Code: [ Select ]
div {
    width: 100px;
    height: 100px;
    background-image: stripe_pattern.jpg;
    background-color: rgba(200, 90, 100, 0.5); /* reddish color tinge */
    background-order: color;
}
 
#div2 {
    width: 100px;
    height: 100px;
    background-image: stripe_pattern.jpg;
    background-color: rgba(100, 90, 200, 0.5); /* bluish color tinge */
    background-order: color;
}
 
  1. div {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-image: stripe_pattern.jpg;
  5.     background-color: rgba(200, 90, 100, 0.5); /* reddish color tinge */
  6.     background-order: color;
  7. }
  8.  
  9. #div2 {
  10.     width: 100px;
  11.     height: 100px;
  12.     background-image: stripe_pattern.jpg;
  13.     background-color: rgba(100, 90, 200, 0.5); /* bluish color tinge */
  14.     background-order: color;
  15. }
  16.  


This would place the color on top of the image rather than the image on top of the color. Kind of a lame example but it'd be useful. Think of using it with the new css3 gradients and multiple background and such.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I would +1 that :)

I know your above is just a simple example, but you could still achieve that same effect by having your background image a PNG image set with the alpha at 50%.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

agreed, but say you have something like a diagonal-lines pattern like here on ozzu. At the top in the header, the diagonal lines are more prominent than in the lighter grey in the body. You can't adjust opacity on an image - you would need to save two separate images (or in ozzu's case you havea sprite sheet) in order to achieve this. One where the diagonal line pattern has 50% transparency, the other where the same image has a 20% opacity. Then you place them on top of either a light grey or a dark grey/black.

This works great, but it would be a hell of a lot easier and a bit faster if you could simply place the color on top of the image and apply different opacities to the colors, making your pattern appear more defined behind a color of higher transparency, and less defined behind a color of higher opacity.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

You could always place one div directly over another (giving them the same placement attributes and using z-index to determine their stacking order) and use the image as the background in the lower one and the semi-transparent colour as the background in the higher.

Not quite as convenient, I realize, but still doable under the current spec. - which, let's be fair, we'll probably have for a while (who knows when a CSS4 specification will be out - or, more importantly, when browser vendors will get around to adapting it).
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Hob Bramble wrote:
You could always place one div directly over another (giving them the same placement attributes and using z-index to determine their stacking order) and use the image as the background in the lower one and the semi-transparent colour as the background in the higher.

Not quite as convenient, I realize, but still doable under the current spec. - which, let's be fair, we'll probably have for a while (who knows when a CSS4 specification will be out - or, more importantly, when browser vendors will get around to adapting it).

This site really needs a +/-1 reputation counter per post so I could +1 that.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 30 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.