CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
konstantinos
konstantinos

Reputation: 25

setting a linear gradient above a background image in Bootstrap

How can i set up a linear gradient above a background image in Bootstrap? i have tried many ways, but i can't figure out whats happening and i can't see the gradient. it is supposed that the gredient comes after the image, but again nothing happens, the only thing i see is the image itself.

#promo {
margin: 50px auto 50px;
background-image: url(images/promo.jpg), linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(100,51,51,0.6) 86%, rgba(51,51,51,0.8) 100%);
opacity: 0.5;
height: 500px;

}

<section id="promo">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Hello World</h1>
            </div>
        </div>
    </div>
</section>

Upvotes: 1

Views: 5980

Answers (1)

Paulie_D
Paulie_D

Reputation: 115278

You have the images in the wrong order:

Per MDN

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

#promo {
  background-image: 
    /* top image*/
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(100, 51, 51, 0.6) 86%, rgba(51, 51, 51, 0.8) 100%),
    /*bottom image*/
    url(http://lorempixel.com/image_output/abstract-q-c-500-500-3.jpg);
  height: 500px;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="promo">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
</section>

Upvotes: 2

Related Questions