1

I fear that this can't be done but nevertheless it is something which I think should be able to be done.

I have a webpage where the body has multiple backgrounds (one is a solid colour, one is black but only 0.2 opacity and the third is a paper texture). The idea is that the solid colour can be changed (faded using CSS transitions) depending on certain circumstances. The second layer changes in opacity to manipulate the darkness of the colour.

The problem is both of these are done independently and I don't know of a way to change one of the backgrounds without having to declare them all.

e.g. I define the original backgrounds like this: background: url( "overlay.png" ), rgba(0,0,0,0.3), -webkit-gradient(linear,top,bottom,from(black),to(white));

-note that I don't actually use rgba() as that wouldn't work ( Multiple CSS backgrounds, colour over image, ignored ) so I use a gradient that is solid. I want to be able to do something like:

background: ,rgba(0,0,0,0.6),; OR background-2:rgba(0,0,0,0.6);

Is this possible?

Community
  • 1
  • 1
Daniel Chatfield
  • 2,952
  • 3
  • 19
  • 17

1 Answers1

0

place multiple divs on each other, and control them individually.

<div class="backgroundlayer1 backgroundlayer2 backgroundlayer3">
page in here
</div>

then you can work individualy on each layer.

or use multiple backkground in css

background-image:url(img1),url(img2);

last one is CSS3 and might lack support

Thomas Andreè Wang
  • 3,379
  • 6
  • 37
  • 53
  • That is what I am doing - just wanted to know if you HAD to do that as it seems sloppy and hackish - something which you shouldn't have to do when you are only targeting modern browsers. – Daniel Chatfield Jul 22 '11 at 16:53
  • you could write class="backgroundlayer1 backgroundlayer2 backgroundlayer3" if you only want one div – Thomas Andreè Wang Jul 22 '11 at 17:33