JakeFromStateFarm JakeFromStateFarm - 2 months ago 14
HTML Question

Why is my top linear gradient working but not bottom?

I have a background image, and I want the linear gradient to be on both the top and bottom. I thought the CSS I had was supposed to work, but I can only get the top gradient to work. There is a div below the features div, and I'm wondering if that is messing something up? I am bashing my head right now :D

.features{
height: 300px;
background: linear-gradient(top, #fff, transparent);
background: linear-gradient(to bottom, transparent, #fff);
background-image: url('assets/Background_Features.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

<div class="container-fluid p-x-0 features text-xs-center">

</div>
<div class="container-fluid p-x-0 p-b-3 m-t-3 pricing text-xs-center">

</div>


Link: http://jakeford.io/pwi-test/home.html

Answer

You should combine multiple gradient stops with multiple backgrounds definition passed with coma delimiter rather than overwriting one background-image rule with another. Here is a codepen for your use case:

http://codepen.io/MakiBM/pen/NRaWrr

.bg {
  ...
  background-image: 
    linear-gradient(to bottom, white, transparent 40%, transparent 60%, white),
    url('https://a2ua.com/mountains/mountains-007.jpg');
  background-size: cover;
  background-position: center;
}

And some resources about both both technics:

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

http://www.css3.info/preview/multiple-backgrounds/

Comments