Back To Website Design Forum

CSS4 - background z-index

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post April 26th, 2012, 10:11 pm

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.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 26th, 2012, 10:11 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post April 27th, 2012, 2:00 pm

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%.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post April 28th, 2012, 1:24 am

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.
Use your words like arrows to shoot toward your goal.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post April 30th, 2012, 12:50 pm

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).
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 1st, 2012, 9:25 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 162 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.