To Add image using img tag as background and place other content on the image.

Scenario

if we add image as background using css it will cause issue in respnsivness 

Solution

HTML code 

<div class=”main container”>

  <img src=”image_ink.jpg” alt=” Background image”>

  <div class=”overlay”>  

    <div class=”Any other Content”>Place your heading Here</div>

    <p class=’Sub-content’>Place tour paragraph or any other content here</p>

  </div>

</div>

CSS Code

.main-container {

    position: relative;

    max-width: 100%;

    overflow: hidden;

  }

overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    color: #fff;

    width:100%;

  }