markdown 如何改变背景颜色的位置

Posted 2021-05-05

# How to Change Position of background-color

[SOURCE](https://stackoverflow.com/a/22081061/1602807), [SOURCE](https://stackoverflow.com/a/39629075/1602807), [SOURCE](https://stackoverflow.com/a/16886425/1602807)

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.

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

```css
.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;
}
```