-1

Guys i have an html div and here is the code

<div id="mainBody"></div>

I gave it a background image in css and here is the code 

#mainBody{background : url(../images/index/optimizedBackground.jpg) repeat 0 0;}

I want to add a color on it but this color is opacity and view the background image.

so i used this html code and adding a div inside the first one:

<div id="mainDiv"><div id="layoutDiv"></div></div>

I gave the layout div a background color in css:

#layoutDiv{
background-color : #1a1a1a;
opacity : 0.9;}

And it works perfectly but the problem here is anything inside the layout div has 0.9 opacity and i want layout div only has 0.9 opacity not the divs inside it

Ahmed Essam
  • 19
  • 3
  • 2
    Possible duplicate of [How to give text or an image a transparent background using CSS?](http://stackoverflow.com/questions/806000/how-to-give-text-or-an-image-a-transparent-background-using-css) – nicael Dec 23 '15 at 12:54
  • assign it with a rgba colour instead. `background-color:rgba(1,1,1,0.9)` last parameter is the opacity – Theunis Dec 23 '15 at 12:57

3 Answers3

-1

Just use an RGBA-Color. The HEX-Color #1a1a1a would be with an opacity of 0.9 rgba(26, 26, 26, 0.9)

Just paste this and delete the opacity. It would be this:

#layoutDiv{
    background-color : rgba(26, 26, 26, 0.9);}
Philipp
  • 198
  • 1
  • 16
-1

use:

background-color: rgba(26, 26, 26, 0.9);

Then set the text colour to what you require.

thatguy
  • 99
  • 1
  • 11
-1

Use RGBA, Style will apply to the particular element.

    #mainDiv{ background-color : rgba(22,176,33,1); }

    #layoutDiv{ background-color : rgba(233,176,288,0.5) }

jsFiddle Demo

thanga
  • 1
  • 3