Change opacity of background image in HTML

Question

I have created a HTML page. There is a background image in my page. I want to change the opacitry of my background i.e. opacity of image used in background. I am using this code to add a background image to my page:

<!DOCTYPE html>
<html>
<head>
    <style>
    body{background-image: url('IMG_18072014_115640.png')}
    </style>
</head>

    <h1>Hello world!</h1>
    <body>The background image will be shown behind this text.</body>

</html>

How can I change this code to change the opacity of this background image.

possible duplicate of [CSS: set background image with opacity?](http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity) — Matías Fidemraizer, Jan 09 '15 at 13:26
I'm going to stay honest and I've removed my answer, because your question is absolutely duplicated... — Matías Fidemraizer, Jan 09 '15 at 13:26
@MatíasFidemraizer Absolutely. Princess, do you even google? — The Pragmatick, Jan 09 '15 at 13:58

Weafs.py · Answer 1 · 2015-01-09T13:29:55.717

Apply background-image to body's :after :pseudo-element and change its opacity, so that the body's content is not affected.

body, html {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://www.lorempixel.com/600/400);
  opacity: 0.3;
  z-index: -1;
}

<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>

score 0 · Answer 2 · answered Jan 09 '15 at 13:18

0

I think you misunderstand some things in html,

but one simple solution would be to make a transparent background image... (PNG24 transparency)

answered Jan 09 '15 at 13:18

Gotschi

3,175
2
24
22

score 0 · Answer 3 · answered Jan 09 '15 at 13:19

Try this way to change opacity of psudo element : DEMO

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Change opacity of background image in HTML

3 Answers3