Opacity on DIV but not inside content…

[albertc30]

Hi all.

I am new to this and not a web designer nor developer.

I am having a play at a website for me and I really like the idea of opacity to images used on backgrounds.

The issue now is that even the pictures and wording inside the DIV also have opacity.

Is there anyway to avoid this please?

Many thanks.
Albert

[Shikkediel]

Not really, it’s quite a common question. You’d either have to create a separate element for the background or make the image opaque to start out with. Opacity on the parent can’t be “undone” for the children.

[andrewehipp]

There is actually. You don’t put the background on the div, you create a pseudo element that has the background and the opacity you desire.

div {
    position: relative;
}

div:before {
    content: '';
    display: block;
    opacity: 0.5;
    background: url('image.jpg');
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

[Shikkediel]

So there isn’t – that would fall under creating an extra element as mentioned. It is the nicest approach though.

[albertc30]

I’m lost guys…. I’ll give it a go and see what I can do.

Many thanks for your kind input.

[Author]

Posts