How to make background image responsive using before in css?

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('') no-repeat;height:100px;margin-top:30px;max-width: 100%;background-position:center;

Try setting height to auto

I just want to show image as background

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

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