Trying to add an image over an other image using CSS

Question

I retrieved a Bootstrap template and I am trying to modify it a little bit in order to add a logo over a background image (back_img.jpg in my code example), in the top left of it. I insist on the fact that I really want the logo to be covering part of the background picture. Moreover, I have already seen some solutions to do it, but as far as possible, I would like to change the least possible the source code of the template.

Here is the code :

<!-- Page Header -->

<header class="masthead" style="background-image: url('img/back_img.jpg')">

    <div class="overlay"></div>

    <div class="container">

      <div class="row">

        <div class="col-lg-8 col-md-10 mx-auto">

          <div class="site-heading">

            <h1><font style="font-family: American Typewriter", color="#FAFF5A">Title here</font></h1>

          </div>

        </div>

      </div>

    </div>

  <header/>

Answer 1

This can be done in many ways. method 1:use float property to float log method 2:using position attributes

method 1 add logo (using img tag) inside your considering background image, then write a CSS below.

img 
{
  float: left;
}

To learn about it, use this link
enter link description here

method 2 your considering background should be added position attribute as relative and your logo should be position as absolute, keep in mind that when you adding the absolute keyword to this your logo is out of normal document flow. after using absolute property, automatically you can use top, left, right attribute

EX: Let's say you want to position your logo to the top of your considering background and left it from 15px, code is below

img{
position:absolute;
top:0px;
left:15px;
}

If you want to learn more absolute keyword.use this link enter link description here