CSS背景100%平铺 浏览器缩小背景显示不全解决办法

把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大。

解决方法:

width:100%;min-width:990px;

在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度。

Ps:

逐风个人认为上诉的解决方案还不够人性化,

想要实现不同分辨率下灵活覆盖,逐风推荐以下处理方式:

1、结合JS,当窗口变化时执行事件进行width的固定值调整;

2、CSS限定最小宽度,当浏览器还有继续往小缩的时候,会出现滚动条,因为我们已经预定好最小的宽度,而这个宽度并不会让用户看到空缺的地方,这种也是纯CSS的解决方案了;

如果大家还有新的解决方案,欢迎来和逐风一起探讨交流;\(^o^)/~

另一个办法

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

页面容器(#wrap)与页面头部(#header )为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度:

改变浏览器窗口的大小,小于内容层宽度,如下图所示。

拖动水平滚动条,出现了bug的样子。右边的背景不存在了。如下图所示。

问题的根本在于:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。如图所示。

我们分析,问题的解决之道:既然是宽度理解上的差异,只需要告知浏览器页面容器的宽度,头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时,保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。

css代码为:

#wrap {
    width:100%;
    background:#ddd;
    width:expression(document.body.clientWidth <= 960? "960px": "auto");
    min-width:960px;
}
#header {
    width:100%;
    height:78px;
    border-bottom:1px solid #f60;
    background:#f0f0f0 url(head_tbg.jpg) repeat-x;
}
#page {
    width:960px;
    height:100px;
    margin:5px auto;
    background:#fff;
    border:1px solid #00CCCC;
}

html代码为:

<div id="wrap">
    <div id="header"></div>
    <div id="page"></div>
</div>

时间: 2024-10-26 23:14:05

CSS背景100%平铺 浏览器缩小背景显示不全解决办法的相关文章

css html-html背景图平铺浏览器问题

问题描述 html背景图平铺浏览器问题 拿到ui设计的背景图,直接设置宽高100%,会导致图片变形,各位大牛有什么好的解决方法吗? 解决方案 http://www.itnose.net/detail/6110755.htmlhttp://blog.sina.com.cn/s/blog_a7b8ab2801019lh7.html 解决方案二: http://blog.csdn.net/liuliang841210/article/details/39993541

CSS控制背景图像平铺实现边框阴影效果

一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器.   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

网站设计-网站背景图片平铺的问题

问题描述 网站背景图片平铺的问题 我想用一个宽度为一像素的图片X轴平铺作为网站背景图片,为什么是这个效果.IE和chrome显示两条线,火狐显示一条线,想显示第三张图那样,怎么回事用这个 body{background:url(../images/ecommerce-psdtemplate.png) repeat-x;} 用这个连线都不显示了body{background-image:url(../images/ecommerce-psdtemplate.png) background-repe

Chrome浏览器图片无法显示怎么解决

  Chrome浏览器图片无法显示的解决方法 一.清理缓存1.启动Chrome浏览器,然后单击浏览器右上角按钮,选择"工具"-"清除浏览数据"如下图: 2.在弹出的窗口中将"清除指定时间内的数据"选择"全部"并将下方的"清空缓存"勾选上,最后单击底部的"清除浏览数据"按钮即可.如下图: 二.浏览器设置问题1.还是单击浏览器窗口右上角按钮,选择"设置".如下图: 2.进

Win8系统无法打开网页提示”浏览器控件不兼容“解决办法

  Win8系统无法打开网页提示"浏览器控件不兼容"解决办法: 1.进入Win8系统,然后,使用鼠标双击要浏览的图标即可将浏览器打开; 2.在Win8系统窗口右上角处,点击工具按钮,再选择"Internet选项",接着在窗口上点击高级选项卡; 3.在Win8系统窗口高级选项卡下,点击"启动增强保护模式",然后使用鼠标将选英方框内的勾取消掉,并在窗口右下角点击"确定"按钮保存,即可解决浏览器无法显示故障; 4.返回Win8系统浏

uc浏览器不显示图片解决办法

  uc浏览器不显示图片解决办法.现在,不少人都在使用uc浏览器,但是在使用过程中,有用户反映,uc浏览器不显示图片怎么办?很多朋友可能还不知道,下面小编给你分享下uc浏览器不显示图片解决办法. uc浏览器 方法 1关闭移动网络,过一会儿再打开网络. 有时,由于移动网络的不稳定,网速很慢,会导致uc浏览器在启动后,图片迟迟不能显出出来.这时,你可以选择关闭网络,过一会再开启uc浏览器. 当然,你也可以走动一下,去信号稍微好一点,网络稳定的地方再打开uc浏览器. 2uc浏览器设置错误. 有时,打开

360浏览器占用内存过高解决办法

  说到360安全浏览器,很多人都是又爱又恨,一方面方便,另一方面有老是提醒内存占用过高,小编也是经常遇到,解决的方法网上有很多,不过我自己试了试,都是治标不治本的,下面为大家分析一下问题原因以及360浏览器占用内存过高解决办法. 360浏览器占用内存过高 内存过高原因分析: 在360浏览器3.x的多进程的框架下,内存占用比单进程高,但是优点是能在网页关闭之后完全释放网页占用的资源.在360浏览器3.x的混合进程的框架下,内存占用比单进程较高,但是优点是能在网页关闭之后较好释放网页占用的资源.

火狐浏览器无法看视频的解决办法

火狐浏览器无法看视频的解决办法 1.先adobe官网下载flash player压缩文件,在百度就可以直接进去,下载,这里我就不多说了! 2.解压从adobe官方网站下载下来的flash player的*.tar.gz文件 代码:sudo tar -xzf *.tar.gz 3.接着将libflashplayer.so文件拷贝到/usr/lib/mozilla/plugins目录下 命令:sudo cp libflashplayer.so /usr/lib/mozilla/plugins/lib

UC浏览器电脑版无法卸载解决办法

  UC浏览器电脑版无法卸载解决办法: 很多人发现卸载之后,重启电脑,UC浏览器还是在 1.首先,建议大家用第三方软件进行卸载操作,不要用UC浏览器自带的卸载程序,例如360软件管家 如上图所示,对于热门软件,360软件管家有一键卸载功能,可以自动清除残余配置文件 2.如果还是发现有残留文件,可以再使用360安全卫士的注册表清理功能,将UC浏览器的注册表清除 3.重新启动电脑,即可完美卸载UC浏览器!