Add Opacity To Background Image Css Code Example

Example 1: set background image opacity

#bg{ background-image: url('images/wood1.jpg'); opacity:0.2; width:300px; height:300px; }

Example 2: css opacity example

.opacity30 {   opacity: 0.3;   filter: alpha(opacity=30); /* For IE8 and earlier */ }

Example 3: background image opacity css

body::before{     content: "";     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     z-index: -1;     background-image: url(image.jpg); /*Put your image url*/     background-size: cover;     background-position: center;     opacity: 0.25; /*Value from 0.0 to 1.0*/ }

Example 4: background image opacity css

/* Two ways to make images opaque */  div { 	background-color : rgba(120, 120, 120, 0.5)     	/* the 0.5 is the value of opacity on a scale of 0-1 */ }  /* OR */  div { 	background-color : blue     opacity : 50% }

Example 5: css background image opacity

/*   You have to fake it, as there is no such property */  div {   width: 200px;  /* Image Width */   height: 200px; /* Image Height */   display: block;   position: relative; }  div::after {   content: "";   background: url(image.jpg);   opacity: 0.5;   top: 0;   left: 0;   bottom: 0;   right: 0;   position: absolute;   z-index: -1;    }

Example 6: Background image opacity CSS

div {     opacity : 50%; }  /* Use opacity to change the opacity of selected css */