Question

所以我在为客户修改的网站上遇到一个小问题：http://gator3094.hostgator.com/~sunhome/staging/。

正如您所看到的，我在<header></header>标签周围放置的背景图像并没有拉伸div的整个高度。

这是我的CSS文件的链接（其他一切只是库存基础框架）：http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css

这里也是我用于该网站特定部分的CSS代码：

header { 
    background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed; 

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我用CSS3完成了这些全宽度封面背景一百万次，但我完全不知道为什么这次图像不能覆盖整个div。

希望这只是一个非常简单的修复。我真的很感激任何和所有的帮助。

Answer 1

您的问题是由于缺少适当裁剪背景图片。

请使用标题标记：

header { background: black;}

您会看到背景占据了div的适当尺寸。显示空白区域的原因是因为您的背景图像在图像周围有很多额外的透明空间。因此背景正在重复，您只需要裁剪它，这样它就会显示您想要的图像部分。

还是不相信我？

尝试将其替换为：

header { background: url("http://placekitten.com/1800/950");}

背景不会涵盖整个div

1 个答案: