Question

我有一个html文档，我希望将图像作为背景。对于下一个例子，eveything很有用：

<html><head></head><body><div id="principal"></div></body></html>

的CSS：

#principal 
{
    background: url(../Img/org/world.png) no-repeat;
    width:100%;
    height:100%;
    background-size: 100% 100%;
}

但如果我将html文件重写为：

<!DOCTYPE html><html><head></head><body><div id="principal"></div></body></html>

来自css（background：url（../ Img / org / world.png）no-repeat;）的图像不再显示。为什么呢？

Answer 1

将其添加到样式表：

html,body {width:100%;height:100%;}

您设置为100％的DIV没有任何引用它应该设置为100％的内容。告诉浏览器该文档将填充100％的可用内容，为div元素创建一个引用。

摆弄小提琴： http://jsfiddle.net/UJsRW/

Answer 2

第二个html标签应该在head标签之后。然后告诉身体和html是100％身高＆amp;你的css中的宽度。

以下代码正常运行：http://jsfiddle.net/dbb67/2/

body, html {
width:100%;
height:100%;
}

#principal {
display:block;
position:relative;
background: url(http://fc00.deviantart.net/fs42/i/2009/154/4/d/fantasy_landscape_bg_9_by_joannastar_stock.jpg) no-repeat;
width:100%;
height:100%;
background-size: 100% 100%;
}

DOCTYPE声明删除我的背景图像

2 个答案: