我的横幅背景有问题,背景在 div 底部之前停止。结果,底部有一个很大的空白区域。
这是一个响应式网站,仅在屏幕尺寸低于 1250 像素后才会出现问题(只需调整浏览器的大小,您就会看到它)。
我已经尝试尽可能多地使用 firebug 调整 HTML/CSS(添加 clearfixes 等),但我尝试过的没有任何结果。
这是它在全尺寸时的样子,以及它应该是什么样子:
这是在 1250 像素以下且下方有多余空间时的外观:
我的横幅背景有问题,背景在 div 底部之前停止。结果,底部有一个很大的空白区域。
这是一个响应式网站,仅在屏幕尺寸低于 1250 像素后才会出现问题(只需调整浏览器的大小,您就会看到它)。
我已经尝试尽可能多地使用 firebug 调整 HTML/CSS(添加 clearfixes 等),但我尝试过的没有任何结果。
这是它在全尺寸时的样子,以及它应该是什么样子:
这是在 1250 像素以下且下方有多余空间时的外观:
您的背景图像高度很短,您需要将您的.slider1
类修改为
.slider1 {
background: url("../images/banner-background-01.jpg") repeat-x scroll center 100% transparent;
/* Rest of the styles goes here */
}
此外,正如您评论的那样,您还可以尝试使用background-size
带有y
表示垂直大小设置为的参数的属性100%
尝试repeat-x
从.slider1
. 这应该会导致背景图像在默认的 x 和 y 中重复。
如果您也发布了一些代码会更有帮助,但解决您的问题的最快方法可能是添加以下 CSS:
.slider1 {
background-size: 100% 100%;
}