css background image opacity

Quick Introduction

First, we will understand what is actually opacity means? And then we will see 4 different ways to add CSS background image opacity.

What is opacity?

The opacity property in CSS basically shows how transparent an element actually is. The range of value is from 0-1.

Greater the number = Greater the opacity

Browser Compatibility

ChromeSafariFirefoxOperaIEAndroidiOS
24+5.1+19+12.1+9+2.1+3.2+

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Read more about css opacity property : visit

Also check out post on Thanos snap effect and 40+ Css sliding menus

4 Ways To Add CSS Background Image Opacity

METHOD 1: CSS Background Image Opacity (using :before)

HTML

    <div class="container">
        <h1>CSSPOINT101.COM</h1>
    </div>

CSS


.container {
    position: relative;
    background: #5C97;
    overflow: hidden;
    height: 100%;
}
.container:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url(thanos.jpg(YOUR IMAGE NAME);
    background-repeat: no-repeat;
}

METHOD 2: CSS Background Image Opacity (using :After)

HTML

    <div class="container">
    <h1>Hey WebDevs!</h1>
    </div> 

CSS

div .container{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.container::after {
  content: "";
  background: url(thanos.jpg(YOUR IMAGE NAME);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
}

METHOD 3: CSS Background Image Opacity (using :Linear Gradient)

HTML

 <div><span>Hello world</span></div>

CSS

div {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
  background-repeat: no-repeat;
}
span {
  background: black;
  color: white;
}

METHOD 4: CSS Background Image Opacity (using :Filter)

HTML

    <div class="container">
    <img src="thanos.jpg" alt="thanos.jpg(YOUR IMAGE NAME)">
    </div>

CSS

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
  overflow: hidden;
}

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Thanks for reading my article. Do share with others if you liked it and also check out other posts on python vs javascript and best css hover effects.

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.

5 Comments

  1. tҺe website іѕ really good, I enjoy your website!

  2. tҺe website іѕ really good, I enjoy your blog!

  3. Bookmarked!, I love your blog!

Comments are closed.