CSS Parse Error using After

Question

I am having trouble getting this to validate and work properly.

body {
    background: #020817 url('');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    body::after {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        content: '';
    }
}

I've done some searching and I can't seem to find where I've gone wrong. I'm trying to add a gradient overlay to a background image.

See codepen.io/alexcarpenter/pen/LveDx. It's literally the first hit in a Google search for "gradient overlay to a background image" — darksky
– darksky, Commented Dec 1, 2017 at 0:01

dave008 · Accepted Answer · 2017-11-30 23:41:07Z

1

Is very simple you have the body::after inside body selector, check the example

body {
    background: #020817 url('https://wallpaperscraft.com/image/google_search_logo_summer_drawing_26168_602x339.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

    body::after {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        content: '';
    }

Hope I help you

answered Nov 30, 2017 at 23:41

dave008

4724 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dave008 Over a year ago

Please, could you set the answer as right? Is very helpful for me, thx

Collectives™ on Stack Overflow

CSS Parse Error using After

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related