哦豁，巨大家优良啊嗯！今天我要给巨大家说说 怎么用CSS这玩意儿魔法工具，轻巧松给我们的网页加上漂亮的背景图，让我们的页面变得美美哒！别kan这事儿轻巧松，但是用对了方法，Neng让我们的网页一下子高大巨大上起来哦！

用background属性设置背景图

哇，这背景图是怎么弄的呀？轻巧松！我们用CSS里的background属性就Neng搞定。你kan这样写：

body {

    background: url no-repeat center center fixed;

}

这段代码就像变魔术一样，把一个叫“bg.jpg”的图片变成我们网页的背景图。里面的“no-repeat”是说不让图片再来一次出现， 而“center center”就是让图片在中间，固定不动哦！

直接用background-image风格设置背景图

哎呀， 还有一种geng轻巧松的办法，就是直接用background-image这玩意儿风格。就像这样：

    background-image: url;

这样写也hen轻巧松， 就是告诉网页：“嘿，背景图用这张‘bg.jpg’就优良了！”

设置背景图的巨大细小和位置

优良的， 背景图放上去之后我们还Neng调整它的巨大细小和位置。比如说 我们想让图片覆盖整个屏幕，并且图片不会基本上原因是滚动而移动，就Neng这样写：

    background: url no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

这里的“cover”就像是魔法咒语，Neng让图片完美覆盖整个屏幕，而不会变形哦！

图片颜色和巨大细小要合适

设置背景图的时候，我们还要注意图片的颜色和巨大细小。颜色和网页的风格要搭，不然kan着不舒服。图片太巨大，网页加载就会磨蹭，关系到用户体验。所以我们要根据网页的样式选择合适的图片巨大细小。

给不同设备设置不同背景图

眼下啊，手机啊、平板啊、电脑啊，各种各样的设备dou有。我们得让网页在这些个设备上dou优良kan。那怎么办呢？我们Neng给不同巨大细小的设备设置不同的背景图。就像这样：

/* 细小屏幕设备 */

@media only screen and  {

    body {

        background: url no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

    }

}

@media only screen and  and  {

    body {

        background: url no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

    }

}

@media only screen and  {

    body {

        background: url no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

    }

}

这段代码就像是给手机、 平板和电脑分别穿上不同的衣服，让它们dou优良kan！

选择合适的图片格式

再说说啊，我们还要选择合适的图片格式。常见的有jpg、png和svg。jpgNeng减细小图片巨大细小，png质量优良，svgNeng无限放巨大也不失真实。我们得根据需要来选哦！

哎呀，写到这里我Yi经累得不行了。不过你们学会了没？用CSS设置背景图其实hen轻巧松，只要按照步骤来就Neng让我们的网页变得美美哒！嘿嘿，你们试试kan吧，加油哦！