фонового изображения и элементы на ней

Question

мне нужно поставить некоторые элементы на картинке:

Что лучше всего подходит?

• использовать img и выровнять все элементы на странице с относительным/абсолютным позиционированием?

• или использовать свойство 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

Следуя примеру Нилам Хана вы можете также использовать Shortland свойство: 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 в относительном позиционированном элементе и установка его дочернего элемента в абсолютное позиционирование.