Search code examples
htmlcssbackgroundbackground-image

Can I set an opacity only to the background image of a div?

Let's say I have

<div class="myDiv">Hi there</div>

I want to put a background-image and give it an opacity of 0.5 – but I want that the text I have written will have full opacity (1).

If I would write the CSS like this

.myDiv { opacity:0.5 }

everything will be in low opacity – and I don't want that.

So my question is – How can I get low-opacity background image with full opacity text?

Solution

  • Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

    Secondary div

    Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

    HTML

    <div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

    CSS

    .myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

    See test case on jsFiddle

    :before and ::before pseudo-element

    Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

    HTML

    <div class="myDiv">
    Hi there
</div>

    CSS

    .myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

    Additional notes

    Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

    Test cases

    See test case on jsFiddle: