CODEWITHSUNDEEP
htmlcssbackgroundoverlay
kristofferandreasen
kristofferandreasen

Reputation: 897

Black CSS image overlay is white

I am trying to create a black overlay over a header image and it seems to turn out white instead even though I'm setting the color property to black.

<div id="overlay">
<header class="intro-header" style="background-image: url('http://localhost/WP/wp-content/uploads/2015/01/cropped-Skov.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>Svampe ting</h1>
                    <hr class="small">
                                            <span class="subheading">Posted by krillebimbim on January 30th, 2015</span>
                    <div id="avatar" class="row text-center"><img alt='' src='http://1.gravatar.com/avatar/d1f1634ce363d7dd8a0ca1522270c858?s=92&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D92&amp;r=G' class='avatar avatar-92 photo' height='92' width='92' /> </div>
                </div>
            </div>
        </div>
    </div>
</header>
</div>

My CSS for the overlay:

#overlay{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
color:#000000;
opacity:0.6;
}

And the header styling:

.intro-header {
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
 }

Upvotes: 1

Views: 3586

Answers (4)

Soults90
Soults90

Reputation: 36

Your image has a white tint to it because it's inheriting an opacity of 60% from its parent div, #overlay, as is everything else on that page. You'll need to take everything out of that div before you can get the effect that it sounds like you want:

HTML:

<div id="overlay">
</div>
<header class="intro-header" style="background-image: url('http://localhost/WP/wp-content/uploads/2015/01/cropped-Skov.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                     <h1>Svampe ting</h1>

                    <hr class="small"> <span class="subheading">Posted by krillebimbim on January 30th, 2015</span>

                    <div id="avatar" class="row text-center">
                        <img alt='' src='http://1.gravatar.com/avatar/d1f1634ce363d7dd8a0ca1522270c858?s=92&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D92&amp;r=G' class='avatar avatar-92 photo' height='92' width='92' />
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

Relevant CSS:

#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:0.6;
}

http://jsfiddle.net/x7zu7m2y/

Upvotes: 2

racecarjonathan
racecarjonathan

Reputation: 1234

See the JSfiddle I created HERE. Was this what you were trying to accomplish? You needed to change your color to background-color.

#overlay{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:0.8;
}

Upvotes: 0

fcastillo
fcastillo

Reputation: 948

Maybe that you need is CSS filters. Here you have some examples.

Upvotes: 0

shaneparsons
shaneparsons

Reputation: 1639

Set background-color instead of color

background-color:#000;

Upvotes: 2

Related Questions