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

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?

Answer 1

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!

Answer 2

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

Answer 3

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.