Making a background image transparent without changing the rest of the div

Question

I have a div with a background color and a background image. The div calls this class:

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

I am trying to make only the image somewhat transparent. I tried this:

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  opacity: 0.6;
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

But that makes the entire div transparent.

So I tried this:

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png) opacity(0.6);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

But that makes the image disappear entirely. Can this be done?

can you please post a fiddle so we can test it and can try to help. — Leo the lion, May 30 '16 at 05:58
If you are trying to make the image transparent would it not be a better idea to edit the image itself? — Harry, May 30 '16 at 06:16

score 1 · Answer 1 · answered May 30 '16 at 06:00

What you're trying to do on that single element isn't possible, but there's plenty of ways that could do the same thing with very little extra effort. Probably the best way would be to either add an additional child element to the .cakebg element with the same dimensions that only has the background image, with opacity. Such as:

.cakebg .child-element {
  height: 100%;
  width: 100%;
  background-image: url(img/cake.png);
  opacity: 0.6;
}

If you're trying to keep your markup clean, you can even add this as a pseudoelement. Such as the following:

.cakebg:after {
  content: "";
  height: 100%;
  width: 100%;
  background-image: url(img/cake.png);
  opacity: 0.6;
}

If neither of those methods work, a last resort could be editing the image to have that opacity baked in from your favorite editing software. Hopefully some of these methods might help!

score 1 · Answer 2 · answered May 30 '16 at 06:01

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

.cakebg {
 background-color: #F8BBD0;
 background-size: 25%;
 position: relative;
}

.cakebg::after {
  content: "";
  background: url(img/cake.png);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

OR you can simply use an trasparent png image as background

score 1 · Answer 3 · edited May 23 '17 at 11:52

There is no CSS property to make just the background transparent, but you can fake it by inserting a pseudo element with the same size of element behind it and change the opacity of this.

.cakebg {
    background-color: #F8BBD0;
    background-size: 25%;
    background-position: right top;
    background-repeat: no-repeat;
}

.cakebg::after {
    content: "";
    background-image: url(img/cake.png);
    opacity: 0.5;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1;
}

Please note that that question was already asked quite often, read here for example.

Making a background image transparent without changing the rest of the div

3 Answers3