How do i make a nested div translucent to show body tag's background image?

Question

I have a div thats inside the container div. Now i want to make the inner-most-divs translucent to show the bodies background image. Or can this be done?

To make my question clearer, i used a green border for the div i want to target. I want this div to be slightly translucent so that the body tag's background is visible only in this div. Im thinking z-index should be used here but im not sure how

 .forum-column{
border: 2px solid green;
/*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
background-size: cover;*/
background-color: rgb(35,35,35);
overflow: hidden;
height: 50px;
margin-bottom: 5px;

}

https://jsfiddle.net/jmann1622/hgm0gzs0/2/

I'm aware of opacity and rgba. But my problem is that my target(green border) is inside another div(orange border) which itself is inside another div(red border). Now i do not want any of the other divs to be transparent, only the green bordered div.And i want this (green bordered div) to be translucent so that the body tag's sky image can be seen. Sorry for the confusion, noob here

This has nothing to do with JS nor jQuery. Please tag questions properly in the future. — MonkeyZeus, Jul 14 '15 at 19:41

score 1 · Answer 1 · answered Jul 14 '15 at 19:41

option-1: Use css property opacity:[0-1]

.forum-column{
   border: 2px solid green;
   /*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
   background-size: cover;*/
   background-color: rgb(35,35,35);
   overflow: hidden;
   opacity:0.4;
   height: 50px;
   margin-bottom: 5px;
}

option-2: Use rgba(red,green,blue,alpha) for background-color where alpha is from 0-1 and specifies the translucency

.forum-column{
   border: 2px solid green;
   /*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
   background-size: cover;*/
   background-color: rgba(35,35,35,0.4);
   overflow: hidden;
   height: 50px;
   margin-bottom: 5px;
}

score 0 · Answer 2 · answered Jul 14 '15 at 19:38

0

Use rgba for most browsers.. rgba(35,35,35,.8) the last part is a number from 0-1 to indicate transparency level..

answered Jul 14 '15 at 19:38

nril

558
2
7

score 0 · Answer 3 · answered Jul 14 '15 at 19:40

Just use rgba for background color.

.innerDiv {
  background-color: rgba(35, 35, 35, .5);
}

The last value for a (alpha) can be between 0(100% transparent) to 1(100% opaque).

This will make the innermost div tranparent and the background divs will remain visible through it.

Hope it helps.

How do i make a nested div translucent to show body tag's background image?

3 Answers3