滚动时100%背景图像包装的问题消失了

时间:2011-06-12 04:26:36

标签: css background-image

我有http://www.mrfishermusic.com/

您会注意到主包装器是1042px(#main)。然后我在#container周围宽度为100%。我这样做是因为页面的背景图片宽度很大。

问题是如果浏览器水平调整小...比如说... 700px宽(或者像iPhone一样小),当你向右滚动页眉和页脚都消失了,虽然#主包装保持完好。

我看到其他人有这个问题,但我不是一个CSS忍者,所以我无法在我的网站上重现这个解决方案 - 如果以前有人问过我,我很抱歉。

谢谢!

2 个答案:

答案 0 :(得分:5)

容器大小为100%是相对于视口的,滚动/调整大小时不会更新。您有几种选择:

  • 使用javascript处理视口大小更改
  • 设置标头容器的最小尺寸(以像素为单位)
  • 在身体上设置背景(因为它不限于视口大小):background-image: url(background.png); background-position: center top;

答案 1 :(得分:5)

min-width上设置<body>也可以解决此问题。