CSS中如何设拉伸背景图片铺满屏幕

html-css053

CSS中如何设拉伸背景图片铺满屏幕,第1张

body{

background: url("image.png") no-repeat

height:100%

width:100%

overflow: hidden

background-size:cover或者background-size:100%

}

扩展资料:

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

编程工具

记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。

Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。

参考资料来源：百度百科:CSS

background:url(../../config/img/Title.png) no-repeat不重复

background:url(../../config/img/Title.png) repeat-x横向平铺

background:url(../../config/img/Title.png) repeat-y竖着铺

什么不加就是横竖平铺

如果你是想拉伸的话，竖着切一张几个像素宽的背景图（比如说宽2px，高990px这样的一张图），然后设置repeat-x，横向平铺。这样看起来就像是一张大图。这种方法适用于纵向渐变的背景。

no-repeat: 即无论背景图片的大小, 只显示单个背景图片

repeat: 指背景图片横向和纵向重复连续显示

repeat-x: 指背景图片横向重复连续显示

repeat-y 指背景图片纵向重复连续显示例: 查看本站css文件,可以看到以下代码:

body {

font: normal 12px/1.5 Georgia, sans-serif

text-align:left

background:#444 url(images/bodybg.jpg) repeat-y

}

可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.