divで2つの背景イメージを追加するには

良い日、私は単純なhtmlページを作成しようとしています。今、私はbg-image/colorを追加しようとしています。だから、私はこの単純なhtmlタグdivで2つの背景イメージを追加するには

<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>

を持って、私は何を達成したいことは、この

どのように私はこれを達成することができ、事前に感謝のようなものです。

UPDATE ---

私はこの

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; 
}

をしようとしているが、背景が

出典

2017-09-27 YVS1102

@HenryVarroはええ、それは私が欲しいものです – YVS1102

が壊れているときに、ページの高さの変更、あなたは以下のコードを使用することができますので、それは、応答はありませんdiv内に2つの画像を追加する場合：

background-image: url(image1.png), url(image2.png); 
background-position: center bottom, left top; 
background-repeat: no-repeat;

Rより良く理解：

出典

2017-09-27 03:34:35

は、あなたがこれらのコンテナの背景として画像の背景色とbackground-imageを達成するためにbackground-colorを使用することができます。 2つの異なるコンテナを使用しているので、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

出典

2017-09-27 03:37:21 shree33

divで2つの背景イメージを追加するには

答えて

関連する問題