CODEWITHSUNDEEP
csshtmlimagebackground
Ayse
Ayse

Reputation: 2764

Change opacity of background image in HTML

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.

Upvotes: 0

Views: 883

Answers (3)

Weafs.py
Weafs.py

Reputation: 22998

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>

Upvotes: 2

Manwal
Manwal

Reputation: 23846

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;   
}

Upvotes: 0

Gotschi
Gotschi

Reputation: 3194

I think you misunderstand some things in html,

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

Upvotes: 0

Related Questions