Change opacity of HTML background image

Question

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

Nico O · Accepted Answer · 2014-03-20 15:12:51Z

2

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

answered Mar 20, 2014 at 15:12

Nico O

14.2k10 gold badges58 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

An SO User Over a year ago

I am using flexbox model. Will your code be OK with that ?

Nico O Over a year ago

Try it. I don't think this will get in your way, what so ever

Nico O Over a year ago

@LittleChild it ist just 20% visibile maybe tune this value up. Also see the CSS in the JSfiddle: body {height:100%}

OfirH · Accepted Answer · 2014-03-20 15:15:45Z

2

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.

answered Mar 20, 2014 at 15:15

OfirH

6572 gold badges8 silver badges19 bronze badges

Comments

Kheema Pandey · Accepted Answer · 2014-03-20 15:17:01Z

2

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

answered Mar 20, 2014 at 15:17

Kheema Pandey

10.3k6 gold badges27 silver badges26 bronze badges

1 Comment

Kheema Pandey Over a year ago

I can see the text in center. here is the link you can check as well. jsbin.com/payixipa/2

Collectives™ on Stack Overflow

Change opacity of HTML background image

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related