css - 调整屏幕大小时背景图像响应空白

标签 css

我使用以下 CSS:

background-size: 100% auto;
background:url(Top.jpg);
background-repeat:no-repeat;
background-position:center top;
min-height:800px;

当屏幕尺寸改变时,我有响应式背景图片,但当屏幕尺寸小于最小高度时,响应式背景图片周围出现空白区域。我希望当屏幕变得小于最小高度时,div 的高度会自动改变。

最佳答案

改用background-size: cover

background: ("Top.jpg") no-repeat center top fixed;
background-size: cover;
/* For older browsers */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:800px;

参见 https://css-tricks.com/perfect-full-page-background-image/

关于css - 调整屏幕大小时背景图像响应空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31098764/

相关文章:

css - SASS :after :hover selector

css - 使用 2 个不同高度的 Bootstrap 导航栏

html - 如何固定单选按钮的宽度

css - 在无序列表图像上应用灰度

css - 当元素在页面上移动时是否可以使用 CSS 过渡,因为另一个元素已被删除?

css - 如何在 FF 34.x 中获得 FF 33.x Flexbox 行为?

html - 在 div 中垂直居中元素时如何避免硬编码行高?

html - 如何在ul元素中单独悬停子节点?

javascript - 卷轴上的动漫线

css - 为什么我的 custom.css 文件没有修改我的 materialize.css?