Semi-Transparent Color Layer Over Background-Image

Semi-transparent color layer over background-image?

Here it is:

.background {
background:url('../img/bg/diagonalnoise.png');
position: relative;
}

.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML for this:

<div class="background">
<div class="layer">
</div>
</div>

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

Add a transparent color layer above a background image

Use a simple box-shadow inset:

.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}

JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/

How to add a color overlay to a background image?

I see 2 easy options:

  • multiple background with a translucent single gradient over image
  • huge inset shadow

gradient option:

html {
min-height:100%;
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
}

shadow option:

html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples


a third option

  • with background-blen-mode :

    The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
background-size:cover;
background-blend-mode: multiply;
}

Semi-transparent colour layer over image?

You could use the css ::after pseudo element:

#bgcont::after {
content: ""; // ::before and ::after both require content
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

Making a color overlay with body image background

Use the background CSS property, here's an example.

body {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}

Credit: https://css-tricks.com/tinted-images-multiple-backgrounds/

Adding a semi-transparent, solid bg color over a jpeg

You can use the CSS filter property opacity

img {
filter:opacity(50%);
}

in this case i recommend you use the css filter property if you want to know more about the css filter property i recommend you check this examples:

I hope I've helped ;)
css filter property

How do I set a semi transparent colour over a ACF background image?

Are you looking for this? Take a look.

.acf-image {
width: 200px;
height: 200px;
position: relative;
object-fit: cover;
overflow: hidden;
}
.acf-image:before{content:''; position:absolute; inset:0; background-color: rgba(0,0,0,.5)}
.acf-image img{object-fit:cover; height:100%; width:100%}
.acf-text{position: absolute; top:50%; transform: translateY(-50%); text-align:center; left:0; right:0}
.acf-text p{color: #fff; font-size:17px; }
<div class="acf-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png" alt="">
<div class="acf-text">
<p>Lorem Ipsum<p>
</div>
</div>


Related Topics



Leave a reply



Submit