0

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?

enter image description here

 <!--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;
}
2
  • 1
    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 2, 2017 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 2, 2017 at 17:23

3 Answers 3

0

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

0

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>

0

#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>

2
  • hmm. the pic is being shoved into the div above it.
    – J.G.Sable
    Nov 2, 2017 at 17:52
  • Made some edits, see if that helps.
    – Alan Mabry
    Nov 3, 2017 at 0:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.