CODEWITHSUNDEEP
htmlcss
Pratheesh Prasad Kapu
Pratheesh Prasad Kapu

Reputation: 13

How to position an image on top of another

I'm trying to add a Logo on top of an Image. I tried to overlap these two images but it did work for me. The second image was placed next to the first image instead. Please help me sort this thing out

This is for a website I'm trying to work on using HTML and CSS.

HTML file:

<section id="home">
                <div class="backgroung" >
                    <img src="Images/banner1.jpg" style="width: 100%" class="bg">
                    <img src="Images/yellow.png" class="logo">               
                </div>
            </section>

CSS file:

#home{
    position: relative;
    top: 0;
    bottom: 0;
}
.bg {
    position: relative;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.logo{
    position: absolute;
    top: 20px;
    bottom: 30px;
    height: 250px;
    width: auto;
    z-index: 2;
}

I expected this to be overlapping with each other. I hope it's not because both images are not of the same file types.

Upvotes: 1

Views: 73

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

You should also set the left property of the logo:

.background {
  display: inline-block;
  position: relative;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
<section id="home">
  <div class="background">
    <img src="https://picsum.photos/id/583/300/300" class="bg">
    <img src="https://picsum.photos/id/237/100/100" class="logo">
  </div>
</section>

You can also use multiple background images:

.background {
  width: 300px;
  height: 300px;
  background:
    url(https://picsum.photos/id/237/100/100) no-repeat center, 
    url(https://picsum.photos/id/583/300/300);
}
<section id="home">
  <div class="background">

  </div>
</section>

Upvotes: 1

Related Questions