背景画像の上に画像を配置する方法

Question

背景画像の上に画像を配置しようとしています。バックグラウンドは、divを含むdivの一番下に配置されています。下の中央に配置された背景画像の上の右下隅に画像を配置したいと思います。

私は2つの背景画像を使用しようとしましたが、テキスト領域が縮小して画像をコンテナの下に移動するため、繰り返しのdivの上に画像を配置することができませんでした。

イメージをインラインで配置しようとしましたが、背景の上に表示できませんでした。

これを行うにはどうすればよい方法がありますか？あなたは、私はこれがあなたの希望のレイアウトであることを想定しています説明した内容に基づい

.gradient-bg.slide { 
 
    background: url("http://www.clker.com/cliparts/f/d/b/5/1206555848388219874chlopaya_Bird.svg.med.png") no-repeat left top, linear-gradient(#ffcd74, #f8981d); 
 
    /*background: #ffcd74; 
 
    background: -moz-linear-gradient(top, #ffcd74 29%, #f8981d 78%); 
 
    background: -webkit-linear-gradient(top, #ffcd74 29%,#f8981d 78%); 
 
    background: linear-gradient(to bottom, #ffcd74 29%,#f8981d 78%);*/ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcd74', endColorstr='#f8981d', GradientType=0); 
 
} 
 

 
.slide_cloud { 
 
    background: url("https://preview.ibb.co/cyvOLv/harris_relativity_cloud_footer.png") no-repeat bottom center; 
 
    background-size: inherit; 
 
    padding: 20px; 
 
    height: 500px; 
 
    text-align: center; 
 
} 
 

 
.logo-image { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/WikiSpecies_notext.svg/300px-WikiSpecies_notext.svg.png") no-repeat bottom right; 
 
    padding-top: 100px; 
 
}

<div class="gradient-bg slide"> 
 
    <div class="slide slide_cloud"> 
 
    <h2>Generic Header</h2> 
 
    <div class="logo-image"> 
 
    </div> 
 
    <div class="slide-content"> 
 
     <div class="text">Generic text.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

。

<div class="cloudbg"> 
<div class="bird"> 
<img src="http://www.clker.com/cliparts/f/d/b/5/1206555848388219874chlopaya_Bird.svg.med.png" height="75px" width="100px"> 
<h2>Generic Header</h2> 
<div class="content"> 
<br> Generic Text 
</div> 
</div> 
<div class="logo"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/WikiSpecies_notext.svg/300px-WikiSpecies_notext.svg.png" height="50px"> 
</div> 

上記のコードで絶対配置を使用してオブジェクトを配置しました。ヘッダーを同じ行に入れるには、以下のようにインライン要素にします。必要に応じて値を変更してください。ここで

.bird h2 { 
display: inline; 
vertical-align: top; 
} 

.cloudbg { 
background: 
url("https://preview.ibb.co/cyvOLv/harris_relativity_cloud_footer.png") no- 
repeat bottom; 
height: 350px; 
text-align: center; 
} 

.bird { 
display: inline; 
float: left; 
} 

.content { 
display: block; 
} 

.logo { 
display: block; 
position: absolute; 
bottom: 2px; 
right: 5px; 
} 

はStackOverflowの営業溶液 - https://jsfiddle.net/jts9owh4/