CODEWITHSUNDEEP
cssreactjsimagestyled-components
Mattia Fantoni
Mattia Fantoni

Reputation: 955

React styled-component: How can I create a background overlay on top image-background css

I'm looking how to create a single component which includes a background image and a black semi-transparent overlay on top of it using react styled component

Here an example: enter image description here

Upvotes: 0

Views: 1559

Answers (1)

Mattia Fantoni
Mattia Fantoni

Reputation: 955

Solved using the following code:

const ParallaxImgStyled = styled.div`
    background-image: url(${(props) => props.imgUrl});
    background-size: cover;

    /* Set a specific height */
    min-height: 450px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
    position: relative;
    z-index: 0;

    &:before {
        background: rgba(0, 0, 0, 0.6);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

`;

Upvotes: 2

Related Questions