How to make background image responsive using before in css?

HTML-CSS
1

I have added a image in a page using :before by css when I minimising the browser image is not looking responsive.
Here is the code:

.route-container::before {
content: "";display: block;background: url('https://www.youstable.com/banner/728X90.png') no-repeat;height:100px;margin-top:30px;max-width: 100%;background-position:center;
  }
3

Try setting height to auto

4

I just want to show image as background

5

I have tried it but it does not show a image , when I changing height to auto it does not showing image

6

you need to use the property called background-image not background