CODEWITHSUNDEEP
cssbackgroundopacity
pieterbesje
pieterbesje

Reputation: 69

How do I use opacity on a background image without effecting the text?

i'm trying to use opacity on a background-image but if i use it it will effect the text aswell.

.content_wrapper{
width:320px;
height:374px;
color:black;
background-image: url('../images/beuningse-boys-midden.png');
background-size:130px;
background-repeat: no-repeat;
background-position-x: 95px;
background-position-y: 155px;

}

Upvotes: 2

Views: 112

Answers (2)

Chris Spittles
Chris Spittles

Reputation: 15359

You cannot change the opacity of a background-image with CSS. However, there are ways of achieving the same result.

Method 1

This method uses the :after pseudo class which is absolutely positioned inside its parent. The background image is set on this pseudo element along with the opacity giving the impression that the background opacity is set on the background itself.

HTML

<div>
  Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>

CSS

div {
  width:320px;
  height:374px;
  display: block;
  position: relative;
  border: solid 1px #f00;
}

div::after {
  content: "";
  background-image: url('http://placehold.it/800x600');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Method 2

If you need backwards compatibility, you will need an extra element in your markup to achieve the same result:

HTML

<div class="container">
    <div class="background"></div>
    Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>

CSS

.container {
  width:320px;
  height:374px;
  display: block;
  position: relative;
  border: solid 1px #f00;
}

.container .background {
  content: "";
  background-image: url('http://placehold.it/800x600');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Here is a great article with a CSS3 method of achieving the same result:

http://css-tricks.com/snippets/css/transparent-background-images/

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

Give to the text a class or an id and give it a color without opacity.

p {
    color: rgb(120,120,120); // use here what color you want
}

Upvotes: 0

Related Questions