CODEWITHSUNDEEP
csssassgradientlinear-gradientscompass
Stephan-v
Stephan-v

Reputation: 20329

Gradient overlay doesn't end nicely in the background color

I'm using compass to overlay a gradient on an image. But the problem is that I want my gradient to end stronger so that the image just fades into the current background color.

This is my scss:

.hero {
    width: 100%;
    height: 500px;
    background: url('../images/MacBookAir.jpg') center center no-repeat;
    @include background-size(cover);

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
    }
}

html is simply:

<div class="row hero"></div>

Example

It's hard to see since the background is white here also but I'm guessing since I'm ending my gradient in 100% white it should just fade into the background?

Can somebody help me with this or maybe provide a better(cleaner) solution in compass to get this done?

Upvotes: 0

Views: 393

Answers (2)

erwstout
erwstout

Reputation: 1307

Alright, so what I did, is actually give a height to your &:before so that it knows how tall it should go, while this might not be the most responsive choice, it works.

So your Sass would look like this:

.hero {
    width: 100%;
    height: 500px;
    background: url('http://placesheen.com/1200/500') center center no-repeat;
    background-size:cover;

&:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 508px;
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
    }
}

The before wasn't reaching the full height, so it needs to extend 8 more pixels, thus 508px. You could probably play with percentages as well to achieve the same effect.

I created a little tid bit on Sass Meister for you to take a look at, I wrapped it in a container just so it was easier to view in the Sass Meister tool...

http://sassmeister.com/gist/3528cb23d3e831231949

Upvotes: 1

Clive_Bigsby
Clive_Bigsby

Reputation: 189

Why not just take the image into photoshop and fade it out to a solid color? Seems to me like you're adding in code that doesn't need to be there. But if that isn't an option, and you must use a CSS gradient, you can always apply multiple gradients by separating the gradients with commas to darken it further since it already ends in 100%.

Upvotes: 0

Related Questions