Html images on top of image

Question

I'm designing a small website for a music festival and I thought I could just make the homepage look like the poster we've designed. So what I want to do, is to save the single layers of that poster (i.e. background and the logos of the bands, etc.) as pngs, so I can have the background of the poster as the website's background and then put the logo layers etc. on top of it (when that's done, I'd like to animate them a little, but first things first). I've tried the background-img property, but that way, I can't seem to resize the image the way I want it to. So I've tried it like this:

<body>
<img src="background.png" class="bg">
<img src="img/01_Headline.png" class="header">
</body>

which makes the background img appear the way I want it to, but of course this puts the other logos that I want on top of background.png down below it.

This is super basic CSS/HTML. Check a tutorial site for this. Its the background-image attribute in CSS... — Araymer, Jul 09 '17 at 18:15
Possible duplicate of [How do I position one image on top of another in HTML?](https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) — JJJ, Jul 09 '17 at 18:18

Atlas_Gondal · Answer 1 · 2017-07-09T18:33:33.050

Try something like this:

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.bg {
  z-index: 1;
}
.header {
  z-index: 3;
}

<body>
  <img src="https://placehold.it/200/333333" class="bg">
  <img src="https://placehold.it/100" class="header">
</body>

The Better way:

.bg {
    background: url("https://placehold.it/200/333333");
    background-repeat: no-repeat;
}

<body>
  <div class="bg">
    <img src="https://placehold.it/100" class="header">
  </div>
</body>

Html images on top of image

1 Answers1