在响应式布局

我设计一个响应式布局，并放置在使用以下CSS背景上一个蹩脚的PNG覆盖绝对定位的背景：在响应式布局

#bg{ 
    background:url(images/top1.png) no-repeat; 
    position:absolute; 
    width:1423px; 
    height:350px; 
    top:0; 
    left:50%; 
    margin-left: -711px; 
}

这样，图像始终，无论在页面中央的宽度。当浏览器窗口缩小到宽度小于#bg覆盖图的背景图像时，会出现问题。水平滚动条出现，背景延伸到右侧（尤其是当浏览器非常小时）。

你可以看到这这里DEMO：http://pixelcakecreative.com/cimlife/responsive2/

正如你可以看到出现一个水平滚动条，我想浏览器窗口缩小，而不是保留图像的全部宽度！有任何想法吗？

来源

2011-12-03 JCHASE11

我接着说：最大宽度：100％'，和滚动条变小，但不能完全消除。（如果您使用JavaScript进行响应，为什么不能用JS调整背景？） –

不要忘记在文本框中添加type =“text”。 – ZippyV

试试这个CSS代码：

 #bg{ 
background:url(images/top1.png) no-repeat center; 
position:absolute; 
width:100%; 
height:350px; 
top:0px; 
left:0px; 
}

来源

2011-12-03 20:10:04

这确实修复了它，但是当浏览器足够小时，会出现另一个水平滚动条。任何想法为什么？这不是因为绝对定位的BG，而是其他的东西。 – JCHASE11

刚刚有了一个快速浏览一下你的代码。看看你的导航，这个产生滚动条。

查看如何在浏览器中启用开发人员工具来检查您的页面。这是检查元素属性的好方法。

下面是Chrome的一个很好的介绍：Link

而对于Safari浏览器：Link

来源

2011-12-04 16:57:31 Melros

在响应式布局

回答

相关问题