头部右侧文字
头部左侧文字
当前位置:网站首页 > HTML教程 > 正文

CSS固定背景图片不跟随浏览器的滚动

Admin_Long Admin_Long . 发布于 2023-11-13 10:51:37 34 浏览

看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了Javascript,CSS也可以轻松实现。

CSS固定背景图片不跟随浏览器的滚动 第1张

background不随浏览器滚动的代码如下:

CSS代码

 CSS
body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding:0;}

只需要一个核心代码就实现了背景不随浏览器滚动,兼容了IE6+浏览器, 其核心代码为:background-attachment: fixed;

无论滚动条如何拖动,背景图片始终牢牢固定在页面上。

目前绝大部分人都在用宽屏浏览器,所以我们设置的背景最好选择在1920*1080大小较为合适,无论是微博还是QQ空间,用户关注的是中间的文章,选择背景要挑选主题画面偏向两边的,使其让人显而易见,才能起到画龙点睛的作用。

如果你用其他的方法不能解决IE6背景不随浏览器滚动,不妨试试上面的CSS代码,或者用下面的JS来解决。

IE6浏览器实现背景不随浏览器滚动的代码:

JavaScript代码

 JavaScript
<script type="text/javascript">var scrollBackground = true;</script>


Admin_Long

Admin_Long

TA太懒了...暂时没有任何简介

精彩新闻