How to make a background within a banner responsive for any size screen using css?

Question

I am adding a svg as the background of a banner component in my css file but when I resize the webpage either bigger or smaller, the image does not display correctly.

Here is my code:

 .banner {
    background: url("../../assets/images/auth/plantATree.svg") center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    @media screen and (max-width: 752px ) {
      display: none;
    }
  }

I want to make the background where I'm adding my svg to display fully no matter the size of the browser.

Answer 1

Try adding this to the head section/top section of your html:

<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">