1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。
2、然后建立一个html文档，将它和背景图片放到一个文件夹中。
3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了，这不是想要的效果。
6、然后可以给div再加上属性，-moz-background-size:100% 100%background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。
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
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满stretch 拉伸）
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）
定义缩放转换
Perspective（n）为 3D 转换 translate rotate scale
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动
