背景画像とその上の要素

Question

：

より良いアプローチは何ですか？

• ページ上のすべての要素を相対/絶対位置に整列させますか？

• またはbackground-image CSSプロパティを使用しますか？

私はimgタグを使い始めましたが、今は背景イメージを決めました。悲しいことに私は基本的な問題を抱えています。バックグラウンドプロパティを使用しているときに、何かがあるときにイメージが表示されるだけです。私はそれがまだ非常に単純な問題だと信じています。

は私を助けてくれてありがとう:)

SCSS

header { 
    margin-top: 78px; 
    width: 100%; 
    background-image:url(../img/header.png); 
    background-position: center; 
    background-repeat: no-repeat; 
} 

Answer 1

をあなたは（あなたが行うように見えた）あなたの背景画像上のコンテンツをオーバーレイしたい場合は最善のアプローチは、背景を追加することですあなたのdivに画像を追加し、それに高さを与え、そのdivの中にコンテンツを追加します。例：あなたはまた、ショートランドプロパティを使用することができますニーラム・カーンの例次の

<div class="bg-image"> 
    <div class="bg-image-module"> 
    <p>Some Content</p> 
    </div> 
</div> 

.bg-image { 
    height: 500px; // change to be what you need. 
    background-image: url(/path/to/image.jpg)"; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

Answer 2

： HTML + SCSS

<div class="bg-image"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
.bg-image { 
    position: relative; 
    height: 500px; // change to be what you need. 
    background: url(/path/to/image.jpg) center/cover no-repeat; 
    div:nth-child(1) { //this will select the first div 
     position: absolute; 
     top: 30px; 
     left: 100px; 
    } 
} 

より良いアプローチは何ですか？

相対配置要素でbackground-image CSSプロパティを使用し、その子を絶対配置に設定します。