如何在不进行引导的情况下保持背景图像响应？

Question

#overlay {
 position: relative;
  height: 630px;
 background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
 background-image:url("images/g.jpg");
   max-width: 100%;
 background-size: 100% 100%;
 
}
#overlay svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}


#inner-banner-image {
  padding-top: 100px;
  width: 90%;
   padding-left:750px;

  margin: auto;
  
}

#banner-content {
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
 background-color:rgba(255,0,0,0.3);
  margin-bottom: 12%;
  max-width: 660px;
  margin-top: 15%;
    height:400px;
}

<div id="content">
<div id="overlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
    <circle fill="white" cx="0" cy="100" r="100" />
    <circle fill="white" cx="200" cy="100" r="100" />
  </svg>
<div id="inner-banner-image">
                <center>
                <div id="banner-content">
               <h3> Let's Explore </h3>
                 <h1>Welcome to our GiftShop Store</h1>
                    
                    <a class="btn btn-1"
                     href="#innerwarp">Shop Now </a>
                    </div>
                </div>
                </center>
            </div></div>

我想创建一个带有敏感背景图像的倾斜div。我尝试了所有可能的解决方案，但对我没有任何帮助。我只找到一种解决方案，但这给了我一个压缩的图像。如何解决这个问题？请任何人帮助。 预先感谢

Answer 1

尝试这样的事情

#overlay {
  position: relative;
  height: 630px;
  background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-image:url("images/g.jpg");
  max-width: 100%;
  background-size: cover;
}

您还可以将background-size:cover;替换为background-size:fill;