如何使用div添加2个背景图像

时间:2017-09-27 03:25:00

标签: html css

我正在尝试创建一个简单的HTML页面。现在,我尝试添加bg-image / color。所以我有这个简单的html标签:

<html>

  <style type="text/css">
    .header {
        height: 100px;
    }   

    .kontent1 {
        height: 50px;
        margin-top: 10px;
    }

    .kontent2 {
        height: 50px;
        margin-top: 10px;
    }
  </style>

  <div class="bgheader"></div>
  <div class="header">HEADER</div>
  <div class="kontent1"> KONTENT </div>

  <div class="bgfooter"></div>
  <div class="kontent2"> KONTENT</div>
  <div class="footer">FOOTER</div>

</html>

所以,我想要实现的是这样的:

enter image description here

如何实现这一目标?

更新

我试过这个:

body{

    background:
        url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
        url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;    
        background-size: contain;
        max-height:80%;    
        padding-top: 20px;
        margin-bottom:10px;
}

但它没有响应,因为当页面高度发生变化时,背景会被破坏。

2 个答案:

答案 0 :(得分:0)

您可以使用以下代码在div中添加2张图片:

z

您可以通过以下链接获得更好的理解:

  1. http://www.css3.info/preview/multiple-backgrounds/
  2. https://www.w3schools.com/css/css_background.asp

答案 1 :(得分:0)

您可以使用background-color获取背景颜色,并使用background-image作为这些容器的背景图像。由于您有两个不同的容器,因此更好的方法是单独设置背景,而不是使用body或父div上的背景。

您可以尝试这样的事情,

.header-container, .footer-container {
   width: 200px;
   height: 200px;
   border: 2px solid black;
   text-align: center;
   text-transform: uppercase;
}

.header, .content {
  min-height: 100px;
}

.header-container {
  background-color: #DD3388;
}

.footer-container {
  background-color: #33DD44;
}
<html>
    <head>
    </head>
    <body>
        <div class="header-container">
            <div class="header"> Header </div>
            <div class="content"> Content </div>
        </div>
        <div class="footer-container">
            <div class="content"> Content </div>
            <div class="footer"> Footer </div>
        </div>
    </body>
</html>