changePositionBackgroundColor.md

How to Change Position of background-color

SOURCE, SOURCE, SOURCE

Actually you can't change the position of a background-color, instead we need to use a trick to create a background-image with solid gradient and position that instead.

Here is the example of a div that have color background fill up and leave around 100px at the bottom unfilled.

<div class="jio-block">
    ...
</div>
<img id="background-bottom" src="{{cdn_url}}assets/images/meet-doctors-background-bottom.svg"/>

.jio-block {
    background-image: linear-gradient(#F3F8FF, #F3F8FF);
    background-position: 0 -100px;
    background-repeat: no-repeat;
}

// Extra, use another div with image to cover for that 100px space
#background-bottom {
    width: 100%;
    height: 150px;
    margin-top: -100px;
    position: relative;
    z-index: -1;
}