How do I change opacity of background in css without altering the entire container

Question

Simple as it may look I need to create a background for a website with a container that would be semi-transparent. If I add opacity: 0.5; inside of the #content I will end up having the entire container, with all the widgets and letters going ghost. What should I do to apply transparency only to the background image? One answer would be to add transparency to the picture inside of PS but still I am curious.

#content .container {
    background:url(images/menu_bar.png) left top repeat-y !important;
}

I need to apply that transparency to an image, not just to a single colour background — Mikolaj Marcisz, Aug 14 '13 at 04:54

score 1 · Accepted Answer · answered Aug 14 '13 at 01:38

Give this a try:

#content .container {
  width: 500px;
  height: 100px;
  background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}

The 'a' in rgba sets the opacity of the color which is 'rgb'. Of course you can set the values to your liking though. If this helps, click the checkmark ;)

Also, don't forget to set the width and height of the image.

score 1 · Answer 2 · answered Aug 14 '13 at 01:47

One way around the issue is using the position attribute and the z-index attribute. The element you want to be transparent will be the one underneath and then the opaque content will be positioned on top of it.

example:

#transparent-box {
   position: absolute; top: 10px; left: 10px;
   z-index: 1;
   }

#opaque-content {
   position: absolute; top: 20px; left: 20px;
   z-index: 2;
   }

caveat:

When you use this method, you have to bear in mind the indentation/padding you want your content to have and then position it appropriately.

Hope that helps.

score 1 · Answer 3 · answered Aug 14 '13 at 01:55

You have an interesting problem - the likes of which always have interesting solutions. I'm a big fan of CSS myself and I've tried to mimic the behaviour you need with a few CSS properties here : http://jsfiddle.net/Tax4w/

However, you can always tweak it to suit your needs if this is not exactly what you'd need.

Note: It does look the first time that the text is transparent as well but if you notice carefully it is not

HTML:

<div class="container">
    <div class="inner-container">
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
    </div>
</div>

CSS:

.container{
    width:500px;
    height:500px;
    background-color:#eeeeee;
    position:relative;
}

.inner-container:after{
    content:"";
    background: url('http://placekitten.com/500/500') left top no-repeat;
    width:500px;
    height:500px;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
}

.inner-container{
    width:500px;
    height:500px;
}

p{
    font-size:20px;
}

score 1 · Answer 4 · answered Aug 14 '13 at 02:00

You can do something like this:

HTML

<div class="wrapper">
    <div class="transparent"></div>
    <div class="content">Text goes here</div>
</div>

CSS

.wrapper { 
    position: relative 
}
.transparent { 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    background: #000;
    z-index: 1;
}
.content {
    position: relative;
    z-index: 2;
    height: 100px;
    width: 100px;
}

That will separate out the background opacity and the content opacity. The absolute positioning will ensure that the transparent div covers the entire parent div. Hope this helps!

How do I change opacity of background in css without altering the entire container

4 Answers4