CODEWITHSUNDEEP
htmlcss
Rabin Pantha
Rabin Pantha

Reputation: 981

CSS: Change opacity of background-image within the body element selector

I have added a background image inside body using css property as:

  body{
   background-image: url('background-img.jpg');
  }

Now what I want to do is add opacity property to this background image. Can we do this without using z-index property (ie. by separating div containing background image and contents)? If it was within a image tag I could have used opacity : value property inside css selector but its not the case. Any css tricks or solutions will be appreciated!!

Upvotes: 2

Views: 2531

Answers (3)

code.rider
code.rider

Reputation: 1897

Try this Snippet

body{
  height:430px;
  width:430px; 
}
body::after {
  content: "";
  background: url("https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat:no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
<body>
 <h1>Hello world </h1>
</body>
Hope this helps you THANKS

Upvotes: 2

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use background gradient with rgba() and url() property together.

Just like:

background: linear-gradient(rgba(244, 67, 54, 0.95),
                            rgba(33, 150, 243, 0.75),
                            rgba(139, 195, 74, 0.75),
                            rgba(255, 87, 34, 0.95)),
                            url("http://placehold.it/200x200");

Look at the snippet below:

body {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.6)),
              url("http://lorempixel.com/400/200");
}
<body>This is some text</body>

Hope this helps!

Upvotes: 3

GvM
GvM

Reputation: 1733

div {
  background: url(http://placehold.it/300x300);
  background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(http://placehold.it/300x300);
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
<div><div>

Upvotes: 3

Related Questions