On gists

3 ways to darken background image in CSS

CSS CSS trick

index.html Raw #

<!--
https://linuxhint.com/different-methods-to-darken-background-image-css/ 
https://jsbin.com/kimuzadowo/2/edit?html,css,output
-->

<header class="one"></header>
<header class="two"></header>
<header class="three"></header>

<style>
  
  header {
	
	height: 250px;
	margin-bottom: 5px;

}

/* filter */
.one {
background: url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;
	filter: brightness(40%);
}

/* gradient */
.two {
	background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;

}

/* blend-mode */
.three {
	background:  url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;
	
	background-color: grey;
background-blend-mode: multiply;

}
</style>