如何在中心对齐背景图像并让它在响应时保持其大小

Question

我已经忙了太久了。看过其他问题和答案，但似乎没有一个对我有帮助。尝试了很多东西。

我想要的是在屏幕中间有一个背景图片，当你缩小浏览器时，图片应该保持它的大小并保持在屏幕中间，所以背景的左右站点应该从屏幕上掉下来，中间保持可见。 p.s.我确实看到图像也被垂直裁剪了一点。

例如：http://www.jandekeyzer.be/ 滑块背景图像正是我想要的......这样做的诀窍是什么。

背景位置中心中心等并不能解决问题。我错过了一些东西。 我在 style.css 中有代码。在这一刻（因为它没有帮助）我把它剥离到只有 背景重复：不重复； 背景位置：中心中心； （但即使这样也无济于事）。

谁能帮帮我？

Answer 1

尝试使用background-size: cover;

使用cover background size 属性调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点

Answer 2

您可以尝试使用以下任何属性：

1) background-size: contain; background-size: contains 确保整个背景图像适合背景区域，保持其原始纵横比。如果区域很小，它将缩小图像并使其适合，如果它大于图​​像，它将通过重复图像来填补空白，这可以使用 background:no-repeat 来防止

2) background-size: cover; 这将填满整个背景区域，没有任何间隙。

您可以查看此链接以获取更多解决方案： Responsive background images

Answer 3

这应该可以工作

background-attachment: fixed;  
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 4

您好，如果我理解您的问题。那么它将起作用。试试这个

.Selector{      
   background-image: url('../images/image.jpg'); // Background Image (Set location) 
   background-repeat: no-repeat;  // Never repeat
   background-size: cover;        // Keep size cover
   background-position: center;   // Set image postion center
}

Answer 5

感谢大家与我一起思考。但不幸的是我没有解决它。 现在都试过了。

background: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
position: relative;
min-height:700px;

它不会走到中间，而是保持左对齐。 仅在删除所有行并放置 background-size: 100% 时；背景停留在中间。但是，是的，当浏览器变小时，它会变小。

Answer 6

我认为代码中有一些东西阻止它做我想做的事。如果我通过电子邮件发送代码，是否有人可以查看代码？