CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3448962
user3448962

Reputation: 15

apply opacity only on background

first of all my problem is . i am coding a in parllex website in bootstrap i have putted a background image on section . but when i aplly opacity on it, the opacity apply on whole section but i don't want to . i just want opacity to be effective on image only but not on text and i have tried every solution on stack overflow which i can understand. plz help me out . my project deadlines are close. here is the code .

the section with id quotes here i have to apply the image . but don't want opacity on my text . 

<!-- inpirational quotes
     ===================================================================== -->
  <section id="quotes" data-speed="10" data-type="background">
     <div class="container">
        <div class="row">
           <div class="col-md-8 col-md-offset-2 section-heading animated"
                style="text-align:center" data-animation="fadeInUp" 
                data-animation-delay="0">
              <h2>Financial Services</h2>
              <h1>Dedicated to Creating the Best Mobile 
                  Financial Services Platform</h1>
              <p class="line">&nbsp;</p>
              <div class="quotes-p">
                 <div class="items">
                    <div class="text">Over 2.5 billion people globally are not 
                    supported by the traditional banking methods; they do not 
                    have access to a bank account. The good news is that these
                    people have mobile phones and in most cases all they need
                    to complete a financial transaction. It is also essential 
                    that people have a secure, safe, and seamless way to 
                    manage their cash which is First Global Data's strength.
                 </div>   
                 </div>
                 <div class="items">
                    <div class="text">LEADING EDGE TECHNOLOGY First Global has 
                    developed world class industry leading proprietary 
                    technology which allows the company to deliver a multitude 
                    of secure financial services such as International Money 
                    m Remittance, Loyalty and Rewards Programs.<br><br></div>

                 </div>
                 <div class="items">
                    <div class="text">First Global Money Inc., enables you to 
                    send money "At any Moment, From Anywhere, to Anyone Around 
                    the World”! <br><br><br><br></div>

                 </div>
              </div>
           </div>
        </div>
     </div>
  </section>

the css goes here 

#quotes {
color: #fff;
}
#quotes {
background-attachment: fixed;
background: url(../../img/parallax/1.jpg);
background-repeat: repeat-y;
background-position: 50% 0;
background-size: cover;
}
#quotes h2 {
color: #FFF;
}
#quotes .line {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #fff;
margin-bottom: 30px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
#quotes .text {
font-size: 22px;
font-weight: 300;
text-align: center;
}
#quotes .name {
color: #FFF;
font-size: 22px;
font-weight: 300;
text-align: center;
font-style: italic;
margin-top: 20px;
margin-bottom: 20px;
}

Upvotes: 0

Views: 271

Answers (2)

Norah
Norah

Reputation: 83

Use this

filter:alpha(opacity=x); /* IE */
-moz-opacity:x; /* Mozilla */
opacity: x; /* CSS3 */

below

background: url(../../img/parallax/1.jpg);

Change x to wanted value.

Check this link for more information

Upvotes: 1

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

 background: url(../../img/parallax/1.jpg);

to

 background: url(../../img/parallax/1.jpg) rgba(0,0,0,0.3);

I have applied .3 on opacity, try this, but RGBA in IE, yes be careful.

Upvotes: 1

Related Questions