背景图像的宽度和高度100％

Question

I have a div on my site and in this div i want embedd a background-image. 我的网站上有一个div，在这个div中，我想嵌入背景图片。 The problem is now, i cant see the picture. 现在的问题是，我看不到图片。 How can i see the picture? 我怎么看图片？ I cant finde my mistake. 我找不到我的错误。 If i embedd the picture in the HTML Code it works, but not in the css Code. 如果我将图片嵌入HTML代码中，则可以使用，但不能使用CSS代码。 Because i want to create something like that: Page (The image + scroll) 因为我想创建类似的内容：页面（图像+滚动）

Here is my Page: Page 这是我的页面：页面

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}

body{
    /*background: url("images/bg.png") repeat-x scroll left top #9EB5D6;
    background: url("images/bg2.png");                        */
}

nav{
   background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
   padding: 15px;
}

nav > ul{
    margin: 0px;
    padding: 0px;
    text-align: center;
}

nav ul > li{
    margin-left: 25px;
    display: inline-block;
    list-style-type: none;
}

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    color: #697683;
    transition: color 0.5s;
}

nav ul li > a:hover{
    color: #FFF;
}

.pic1 {
    background: url(images/banner.jpg);
    background-size: 100% 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css" >
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>

            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>

            <div class="pic1">
            </div>

    </body>
</html>

Answer 1

you need to add: 您需要添加：

html, body{
  height: 100%
}

then you can add a height to your image container: 然后可以向图像容器添加height ：

.pic1{
  background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
  background-size: 100% 100%;
  height: 100%;
}

FIDDLE 小提琴

背景图像的宽度和高度100％

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-12-30 19:54:16

背景图像的宽度和高度100％

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-12-30 19:54:16

解决方案1
2 已采纳 2014-12-30 19:54:16