Question

我不能完成div容器的完整背景图像。我希望看到100％的高度和100％的图片宽度。如果我在html代码中添加图像作为标记它完美，但我想在图像上写一些头条新闻。我的意思是背景图像＆＃34;标题侧边栏＆＃34;在侧边栏。这是my Page +代码：

＆＃13;

*{
    margin: 0px;
    padding: 0px;
    color: black;
}

body{
    background-image: url(bg.jpg);
    height: 1500px;
}

section{
    margin-top: 100px;
    width: 1230px;
    height: 100%;
    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 200px;
}

article{
    background-color: #FBB9B7;
    width: 800px;
    height: 100%;
    
    float: left;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

aside{
    background-color: #FBB9B7;
    width: 300px;
    height: 100%;
    
    float: right;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

.header-sidebar{
    background: url(http://www.drlaureen.com/wp-content/uploads/2014/09/headline-sidebar.png) no-repeat;
    height: 50px;
    width: 100%;
    text-align: center;
    padding-top: 8px;
}

＆＃13;

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <section>
            <article>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </article>
            <aside>
                
                
                <div class="header-sidebar">
                    Überschrift 1 
                </div> 
            </aside>
        </section>
    </body>
</html>

＆＃13;

Answer 1

在正文中使用background-size:cover而不是定义高度和宽度

Answer 2

我不太了解你的文字，但我想你想要一个全屏背景图片，对吗？您的图像需要调整大小，具体取决于浏览器宽度。最好为小屏幕加载另一个（较小的）图像。

body {
     background: url(images/bg.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* Styles */
  background: url(images/bg-small.jpg) no-repeat center center fixed; 
}

Answer 3

您可以使用背景大小。

 background-size: auto|length|cover|contain|initial|inherit; For more refer to w3school.

 background-size:100% 100%;

显示div background-image complete

3 个答案: