CODEWITHSUNDEEP
htmlcss
An SO User
An SO User

Reputation: 24998

Change opacity of HTML background image

     html{ 
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

I am using this CSS above to display a background image for my web page. However, the image is a little in the way of the text that I want to display on the webpage.

If I change its opacity, however, all will be fine. I tried using the opacity : 0.5 in the above CSS but that did not help. How can I change the opacity of this background image ?

What I also tried was making a wrapper <div> and setting its background image and opacity. That did not help, either.

My html: 

<body>
        <div class="parent">
            <div class="content">
                <p id="dollar">$</p>
                <p id="name">variableName</p>
                <p id="equals"> = </p>
                <p id="value"> someValue </p>
            </div>
        </div>
</body>

My css: 

@font-face{
            font-family: "RobotoCondensed-Regular";
            src : url("RobotoCondensed-Regular.ttf");
        }

        body, html{
            height : 100%;
        }


        body:after{
            z-index:-1;
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity:1;
        }

        .parent{
            height : 100%;
            display : flex;
            display : -webkit-flex;
            display : -moz-flex;
            display : -o-flex;
            align-items: center;
            justify-content: center;
        }
        .content{
            display : flex;
            display : -webkit-flex;
            display : -moz-flex;
            display : -o-flex;
            align-items: center;
            justify-content: center;
            background-color : rgba(,,,0.5);
            border-radius : 10%;
        }
        p{
            font-family : "RobotoCondensed-Regular";
            font-size : 32px;
        }

Upvotes: 2

Views: 459

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10265

Here is the working Demo. http://jsbin.com/payixipa/1/

body {
  width: 500px;
  height: 500px;
  display: block;
  position: relative;
}
body:after{ 
   content: " ";
    position: absolute;
  z-index: -1; 
    top: 0;
  left: 0;
  bottom: 0;
  right: 0;
background: url('http://lorempixel.com/400/400') no-repeat; 
-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 -moz-opacity:.50; 
  -webkit-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
        }

Upvotes: 2

OfirH
OfirH

Reputation: 657

html {
   position: relative;
}
html:after {
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: absolute;
            opacity: 0.5; 
            filter: alpha(opacity=50);
}

I think this should work.

Upvotes: 2

Nico O
Nico O

Reputation: 14102

Try this:

http://jsfiddle.net/WSEXC/

body {
    position: relative;
}

body:before
{
    content: "";
    z-index:-1;
     background: url(http://www.placehold.it/1200x800) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:0.2;
}

Upvotes: 2

Related Questions