JakeFromStateFarm JakeFromStateFarm - 11 months ago 44
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

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 class="container-fluid p-x-0 p-b-3 m-t-3 pricing text-xs-center">


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

Answer Source

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:


.bg {
    linear-gradient(to bottom, white, transparent 40%, transparent 60%, white),
  background-size: cover;
  background-position: center;

And some resources about both both technics: