老师为什么我的网页背景图加载不出来？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.page{
background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png);
width:100%;
height:auto;
}
.navl{
background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png);
position:fixed;
width:200px;
height:300px;
left:0;
top:50%;
margin-top:-150px;
}
.navr{
background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png);
position:fixed;
width:200px;
height:300px;
right:0;
top:50%;
margin-top:-150px;
}
</style>
</head>
<body>
<div class="page">
<div class="navl">
</div>
<div class="navr">
</div>
</div>
</body>
</html>
我的代码应该没有问题的呀，图片链接地址也是直接ongoing任务提示里复制的。
网页背景图直接打开也是能打开的，但是为什么一运行程序背景就显示不出来呢？
正在回答
同学你好，背景图片中高度设置auto是不可以的，所以显示不出来，需要设置固定的高度。如下：
background-size: 100%;属性可以先了解一下，这是CSS3的属性，后面课程中会学习到。背景图片需要考虑分辨率问题，所以这里添加了，水平和垂直方向上都铺满为100% 。如果直接使用img标签插入图片设置宽度为100%就好。
优化：左右两侧图片没有显示完整，图片的高度是364px
可以调整下
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
同学你好，问题解答如下：
1、理解的都没有问题
2、center是background-position定位属性值，no-repeat是background-repeat是否重复属性值。background是一个简写属性，包括了上面两个。也不是必要的，还是要看背景图片显示在什么位置，以及图片的大小决定是否要重复显示。
在后面CSS3课程中会讲解到，这可以先略过。
3、width设置的是盒子的宽度，而背景大小设置的是背景图片的占比，不一样所以不做比较。但是width属性可以省略掉，因为盒子默认宽度为100%，不可以也可以。
4、是的。或者打开链接在控制台中查看
控制台打开可以在页面右击鼠标，出现菜单，选择检查即可。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星