-1

How to add a background-image + background-color with opacity for body tag?

yaschk11
  • 1
  • 2

2 Answers2

0

try this code include the div tags in your body!

.background {
    background:url('http://placehold.it/100x100');
    position: relative;
    height: 100px;
  width: 100px;
}

.layer {
    background-color: rgba(75, 86, 160, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="background">
    <div class="layer">
    </div>
</div>
007Robin
  • 34
  • 1
  • 2
  • 9
0

You can use background-blend-mode on the <div> that has the background-image.

EDIT: You might want to create a <div> element that acts as the main container for your site instead of adding the background image onto <body>.

.card__image {
    width: 300px;
    height: 300px;
    
    /* Change the opacity of Dodger Blue background by
       selecting a value between 0-1 for the fourth argument. */
    background: rgba(34, 167, 240, 0.75);
    background-image: url('https://unsplash.it/300');
    background-blend-mode: multiply;
}
<div class="card__image"></div>
khan
  • 1,466
  • 8
  • 19