background image and elements on it

Question

I need to put some elements on picture:

What is better approach ?

• use img tag and align all elements on page with relative/absolute positioning ?

• or use background-image css property ?

I've started with img tags but now I've decided for background-image. Sadly I'm suffering with basic problems, as when I'm using background property, image is only visible when there is something on it. I believe that is very simple problem, still.

Thank you for helping me out :)

SCSS

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

Answer 1

If you want to overlay content on your background image (which it looks like you do) the best approach is to add a background image to your div and give it a height and then add content inside that div. For example:

<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

Following the Neelam Khan example you can also use shortland property: 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;
    }
}

What is better approach ?

Use background-image css property in a relative positioned element and set their child to absolute positioning.