Why image is not fit to page screen size?-CodePudding

I have placed image (2400x1600) on page, but part of it is cut off:

image should be fully visible:

here is my css code:

.background-property {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 100vh;
    margin: auto;
}

would be very grateful if you could explain why it fails and what is the possible solution?

P.S. HTML code:

 <div  style="background: url(image/landing-1/new.png);">
      <div >
        <div >
          <div  >
            <div >
              <h2>Are you ready</h2>
              <p>With lots of unique blocks, you can easily build a page without coding. Build your next website
                fast.</p>
              <div >
                <a href="#" >Create a free account <i ></i></a>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

CodePudding user response：

You can achieve this by setting background-size: 100% 100%;

.background-property {
    background-size: 100% 100%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 100vh;
    margin: auto;
}

CodePudding user response：

I would suggest playing around with background-position: top, bottom, center. Because your background image seems to be off on the y-axis. I would try background-position: bottom;

.position-relative {
    background: url('https://i.ibb.co/VT2YChB/new.png');
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    width: 100vw;
    height: 100vh;
    margin: auto;
}

body {
  margin: 0;
  color: Yellow;
}

h2 {
  margin-top: 0;
}

<div >
      <div >
        <div >
          <div  >
            <div >
              <h2>Are you ready</h2>
              <p>With lots of unique blocks, you can easily build a page without coding. Build your next website
                fast.</p>
              <div >
                <a href="#" >Create a free account <i ></i></a>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>