Placeholders-selsctor-sass

by Md. Mostafa Kamal

HTML

<div class="image-one">

</div>
<div class="image-two">

</div>

SCSS

%bg-image {
    width: 100%;
    height:200px;
    margin-top:10px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url("https://photos.smugmug.com/Landscapes/i-NrzmsgX/1/d6d1f060/L/_D819142-Edit-L.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url("https://photos.smugmug.com/Landscapes/i-TH59n3g/4/df16ffc4/XL/_D801374-Edit-XL.jpg");
}