响应式背景图像及其内容

Question

我想要一个响应式的网站。但我的问题是背景图片不能调整大小，当我放大或缩小时，它的内容会被放错地方。

<div id="background-image">
  <div>
    /* content here */
  <div>
</div>

CSS:
#background-image {
  background: url("/assets/beautiful-bg.png") no-repeat;
  background-size: cover;
}

我的代码中缺少什么？

Answer 1

#background-image{
  align-items:center;
  width: 100%; (if not 100vw can be used)
  height: 100%; (if not 100vh can be used)
  background: url('yourpic.png')
  background-size: 100% 100%;
}

看看这个。

Answer 2

你可以在css文件中添加'@media‘来获得一个响应式站点。在styls.css中

@media (max-width: 1024px) {
  #background-image{
  width: 50%;
  }
}

Answer 3

我认为你必须给父母一个高度，这样图像才能正确显示。

#background-image {
   height: 100vh;
   background: url("/assets/beautiful-bg.png") no-repeat;
   background-size: contain /* To resize the image properly with the container*/;
}