How to put background-color on top of background-image

Question

I need to put a div with a background-image background, and while hovering over it with the :hover, a background-color appears rgba transparente, and the background image does not disappear, it will be slightly appearing with background-color transparency. There is this possibility?

(OBS: I can’t create that effect by putting a div inside the other.)
I’ve tried this before: but he replaces one with the other

a{
  background: url("img.png") ;
}

.a:hover{
  background: rgba(43, 80, 142, 0.9);
}

Answer 1

Hello! You can use pseudo elements like ::before or the ::after, follows an example:

#background {
            position: relative;
            margin: 0 auto;
            width: 626px;
            height: 626px;
            background: url("https://image.freepik.com/free-vector/coloured-summer-background_1048-2276.jpg") no-repeat left top;
        }
        #background:hover::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(43, 80, 142, 0.5);
            opacity: 1;
        }

<div id="background"></div>

I hope I’ve helped :)

Answer 2

Look I’ll give you two options.

The result will be this, although they are two different techniques the visual result is the same:

Option 1

Like you said you couldn’t do with a div inside the other I made this model so you could study it and see that yes it is perfectly possible to make the effect using a div inside the other.

You just need the div father has position:relative and the div daughter be position:absolute, in this way the reference of the child is within the scope of the father. In your case how you want to make the effect on a link <a> I put a div within the <a> and I named the postions.

Follow the example of the code.

a {
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-image: url(https://picsum.photos/300/100);
    background-size: cover;

    color: #f00;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 0 0 2px black;
}
a div {
    transition: background-color 300ms;
}
a:hover div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 80, 142, 0.9);
}
a span {
    position: relative;
    z-index: 2;
}

<a href="#">
    <div></div>
    <span>Lorem, ipsum dolor.</span>
</a>

---

Option 2

That option is even simpler than the first, I would particularly opt for it.

Here what I did was use a box-shadow that instead of growing out it grows inside the element, to make the box-shadow grow inside you need to use a inset and a great value of spread-radius you can read more about this property here. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Follows the code

a {
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-image: url(https://picsum.photos/300/100);
    background-size: cover;

    color: #f00;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 0 0 2px black;
    transition: box-shadow 300ms;
}

a:hover {
    box-shadow: inset 0 0 0 10000px rgba(43, 80, 142, 0.9);
}

<a href="#">
    Lorem, ipsum dolor.
</a>

Answer 3

Hello, the @Kamile solution is correct, I would like to take this opportunity to add a suggestion. If you want to use in addition to a background-color with opacity manipulation, you can apply it in a gradient form as follows.

#background {
        position: relative;
        margin: 0 auto;
        width: 626px;
        height: 626px;
        background: url("https://image.freepik.com/free-vector/coloured-summer-background_1048-2276.jpg") no-repeat left top;
    }
    #background:hover::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: 
          linear-gradient(
           to bottom,
           rgba(0,0,0,0),
           rgba(0,0,0,1)
          );
        opacity: 1;
    }

<div id="background"></div>

So you can smooth your opacity, in this example I applied a linear-gradient manipulating black, then it is up to you to manage this application.

Thank you, I hope I contributed.

Answer 4

You can make the color mask on background-image even.

a{
    background-image: url('img.png'); 
    background-size: 100%;
  }
a:hover{
    background-image: rgba(43, 80, 142, 0.9), url('img.png'); 
    background-size: 100%;
  }

Answer 5

Leveraging a hook. If you want to use only one background property, like the image, use background-image, or another more "specific" one. Because when using only the background it is necessary to fill in all the parameters, otherwise the q are not filled will be reset. Ends up getting in the way a little when it comes to figuring out why some property isn’t working.