如何用css设置网页背景固定不动

 时间:2026-02-15 13:05:51

1、首先我们打开系统记事本程序,输入网页基本代码

<html>

 <body>

 </body>

</html>

如何用css设置网页背景固定不动

2、然后输入head标签和css样式标签代码

 <head>

  <style type="text/css">

  </style>

</head>

如何用css设置网页背景固定不动

3、点击style标签之间,输入定义网页背景图片的代码

body

  background-image:url('d:/bg.gif');

}

如何用css设置网页背景固定不动

4、然后在正文body标签下输入一些主体标签和内容

<body>

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

图像不会随页面滚动。

</body>

如何用css设置网页背景固定不动

5、点击文件,另存为命令,将内容保存为html格式后,打开网页预览下。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

6、大家发现现在这种状态,我们滚动鼠标滚轮时候,网页内容和背景图片是同时滚动的,为便于查看,我们修改下代码,让图片不重复显示。

<style type="text/css">

body 

{

background-image:url(d:/bg.gif);

background-repeat:no-repeat;

}

</style>

然后再预览效果。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

7、这样可以很明显的看出来背景图片的变化,为了固定背景图片,我们修改代码为

<style type="text/css">

body 

{

background-image:url(d:/bg.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

</style>

再来看下效果。

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

如何用css设置网页背景固定不动

8、代码设置成功。

  • div+css实现上中下布局
  • div+css如何实现文字与图片左右两边对齐
  • 怎样把网页图片放到指定位置
  • html+css怎么实现横向导航
  • 用记事本编写简单html网页入门:[2]列表
  • 热门搜索
    哲学是什么 喉咙有异物感是什么原因 绪论是什么意思 爱迪生发明了什么 sandro是什么牌子 冰箱冷藏室结冰是什么原因 大红袍属于什么茶 属龙和什么属相最配 同理心是什么意思 ppt是什么