Question

请访问此网站：http://www.themebia.com/pretavivre/

我使用滑块作为背景图片，背景图片的宽度为1920px，以覆盖24＆＃34;屏幕。

我认为，bg图像的宽度会自动通过浏览器调整大小，但高度会创建一个垂直滚动条，用户无需向下滚动文本框＆amp;页脚区。

如何管理不同屏幕的背景图像高度以适应文本框和页脚区域？

我应该使用max-height属性和媒体quires来设置某些断点处图像的最大高度吗？

Answer 1

尝试使用此固定背景图片：

.DivImage
{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请访问： http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Answer 2

将html和身高设置为100％。然后添加到＃home-container

#home-container {
max-height: 100%;
overflow: hidden;
}

但是，你必须改变.slide-desc的位置，否则它将被隐藏。

调整不同屏幕上的背景图像高度

2 个答案: