Background image opacity

Question

I have a section in my HTML that has a background image attached to it through the CSS. The background image goes across the entire screen and is outside the container div which the text resides in. However, every time I change the opacity of the background image so it's very light and subdued, the opacity also changes the text as well (because the background image is tied to the section id). How do I re-work this so that the background image is very faint and the text is strong in the fore-front?

 <!--services section-->
    <section id="services-head-section">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="py-5">
                        <div class="wow animated fadeInLeft">
                            <h1 class="display-4"><strong>SERVICES</strong></h1>
                            <p class="lead" style="font-style:italic;">
                                "We can't solve problems by using the same kind of thinking we used when we created them."
                                -Albert Einstein
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row wow animated fadeInUp">
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Engineering</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Product Development</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Computer Applications</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-university fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Training</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS:

#services-head-section   {
    background: url(img/1855JPerkinsSteamGun2.jpg) no-repeat;
    background-size: cover;
}

Use pseudo element... make the section relative position, than `#services-head-section::before` absolute, containing the bg-image and with opacity any one you like (maybe adjust z-index). — skobaljic, Nov 02 '17 at 17:17
could you show me that code? I tried to interpret what you mean but it didn't work for me. — J.G.Sable, Nov 02 '17 at 17:23

score 0 · Answer 1 · answered Nov 02 '17 at 17:36

I made a jsfiddle to describe what I mean here. https://jsfiddle.net/ww5tqomd/

You are going to have two root level elements in your body tag. The first is going to be your background image, The second is a container that is positioned absolute over the background image.

<div class="background-image">

</div>
<div class="content-with-text">
    <h1>Hello world</h1>
</div>


html,body{
    height: 100%;
    width: 100%;
}
.background-image {
    height: 100%;
    width: 100%;
    margin-bottom: -100%;
    background: black;
    opacity: .2;
}

.content-with-text {
    position: absolute;
    top: 0;
    left; 0;
    color: blue;
}

This way you are able to adjust the opacity of the background without it affecting your content, because technically your content is not a child of the background container, but a sibling.

Hope this helps

score 0 · Answer 2 · answered Nov 02 '17 at 17:37

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

div::after {
  content: "";
  background: url(http://is4.mzstatic.com/image/thumb/Purple118/v4/a0/ee/6c/a0ee6c57-b4b2-14f3-ae42-f47ad1dd5aac/source/1200x630bb.jpg);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background-size:cover
}

<!DOCTYPE html>
<html>

<body>

<p>This is some text.</p>

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text.</p>

</body>
</html>

Alan Mabry · Answer 3 · 2017-11-03T00:41:04.080

#services-head-section {
  position: relative;   
}

#services-head-section::after {  
  background: url('http://lorempixel.com/1800/780/sports/1/') 0 0 no-repeat transparent;
  background-size: 100%;
  bottom: 0;
  content: "";
  left: 0;  
  opacity: 0.6;
  position: absolute;  
  right: 0;
  top: 0;
  z-index: -1;   
}

<!--services section-->
    <section id="services-head-section">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="py-5">
                        <div class="wow animated fadeInLeft">
                            <h1 class="display-4"><strong>SERVICES</strong></h1>
                            <p class="lead" style="font-style:italic;">
                                "We can't solve problems by using the same kind of thinking we used when we created them."
                                -Albert Einstein
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row wow animated fadeInUp">
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Engineering</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Product Development</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Computer Applications</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-university fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Training</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
            </div>
        </div>
    </section>

hmm. the pic is being shoved into the div above it. – J.G.Sable Nov 02 '17 at 17:52 — J.G.Sable, Nov 02 '17 at 17:52
Made some edits, see if that helps. – Alan Mabry Nov 03 '17 at 00:41 — Alan Mabry, Nov 03 '17 at 00:41

Background image opacity

3 Answers3