Html 调整div旁边的背景图像的大小

我试图让我的头版反应灵敏，实际上只有两个因素需要担心。我有一个从左侧开始的背景图像和一个包含与屏幕右侧相关联的各种对象的div。我希望这样，当浏览器收缩时，背景图像会适当收缩，以便右侧的div不会开始与图像相交。根据需要，在某一点之后，我愿意让背景图像完全消失，这样div就有了更多的空间。我怎么能做到呢？代码非常简单。只有一个从左边开始的背景图像和一个带有右边的div:0%

正文
{
背景色：#EAE7DC；
背景图片：url（“images/Earth.jpg”）；
背景重复：无重复；
}
.区块1
{
位置：绝对位置；
右：0%；
顶部：113px；
最小宽度：415px；
}

登录
登录

添加

背景尺寸：封面到正文

代码笔：
添加到您的样式中：

正文
{
背景色：#EAE7DC；
背景图片：url（“images/Earth.jpg”）；
背景重复：无重复；
背景尺寸：calc（100vw-430px）100%；
}

background size
中的第一个表达式是
width
，第二个表达式是
height
。
为了获得100%的视口宽度（
vw
）减去块的宽度，我使用了，这里是w3schools的css代码，可能会对您有所帮助

`

`
为了使背景在某一点消失，您可以根据屏幕的宽度使用以下方法分割样式：

@仅媒体屏幕和（最大宽度：400px）{
身体{
//仅当屏幕宽度小于400px时应用的样式
}
}
@仅介质屏幕和（最小宽度：401px）{
身体{
//仅当屏幕宽度大于401px时应用的样式
}
}
您能与我们分享您的尝试吗？可能包括你的HTML/CSS？只是上传了HTML和CSS。提前谢谢。至于我已经尝试过的，这是我第一次尝试让网页响应，所以我真的不知道从哪里开始。我考虑过使用视口单位，但因为右边的div需要占用绝对的空间，所以我不能这样做。理想情况下，我希望从screen.width中减去div width，并为背景图像提供剩余的长度。但是，当我更改浏览器大小时，这必须在运行中更改，因此我不能调用javascript函数来更改一次。请查看
背景大小的文档，我不确定这会有什么帮助，因为我正在尝试适当调整背景图像的大小，而不是移动它。这似乎只是完全覆盖了我的屏幕，并开始与div相交。哇，谢谢！这正是我一直在寻找的。我不知道你可以在css中做类似calc的事情。太棒了，我很高兴你学会了！
body, html {
  height: 100%;
  }
      
  .bg {
  /* The image used */
   background-image: url("img_girl.jpg");
      
  /* Full height */
  height: 100%;
      
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }