CODEWITHSUNDEEP
htmlcss
Froy
Froy

Reputation: 748

Multiple gradients on one image

I want to have multiple linear gradients or opacity on the same image.

Here is what I have so far: enter image description here

HTML: 

<body>
    <div class="container">
        <div class="inner-container">
            <div class="left-section"></div>
            <div class="right-section"></div>
        </div>
    </div>


</body>

CSS:

*{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #333;
        }
        .container{
            width: 1050px;
            height: 750px;
            background-image: 
                linear-gradient(
                      rgba(0, 0, 0, 0.5),
                      rgba(0, 0, 0, 0.5)
                        ),
                url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg)
            ;
            margin: 0 auto;
            -webkit-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            margin-top: 50px;
        }
        .inner-container{
            width: 75%;
            height: 75%;
            border: 1px solid white;
            margin: 0 auto;
            margin-bottom: 50px;
            border-radius: 5px;
            background-image: 
                linear-gradient(
                      rgba(0, 0, 0, 0),
                      rgba(0, 0, 0, 0)
                        ),
                url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg);
        }

From the CSS, I am calling the same image in both containers. However doing this makes the layout look weird because the image isn't consistent between the outside and inner containers. How can I use the same image to achieve the affect in the image?

Upvotes: 0

Views: 61

Answers (1)

haltersweb
haltersweb

Reputation: 3149

Add background-position: center top to both your container and inner-container and they will line up.

Upvotes: 1

Related Questions