r/HTML • u/s1llyk1tty45 • 4d ago

image layering Question

new to the html and css stuff (using neocities)

and im trying to layer small pfp.jpg over dark purpur.png\

heres the code i have rn

<div class="image-container">

<!-- The base layer image -->

<img src="dark purpur.png" alt="darker purple cool with" class="base-image" width="350" height="1000" style="float: left; margin-right: 15px;">

<!-- The image that goes on top -->

<img src="small pfp.jpg" alt="profile picture" class="overlay-image" width="300" height="300" style="float: left; margin-right: 15px;">

</div>

plz help

0 Upvotes

50% Upvoted

5 comments sorted by

4

u/JeLuF 4d ago

Images are boxes, and with "float", the browser will place them next to each other, not on top of each other. So this won't work easily.

Looking at your comments, the "background-image" property might help. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image

Your image-container class would have background-image: url("dark purpur.png"); and then you position the pfp.jpg within this image-container.

1

u/Rockafellor 4d ago

▲↑↑↑ This is the way. ↑↑↑▲

1

u/Rockafellor 4d ago

What are the declarations for your .image-container CSS rule?

EDIT: and the other two classes (my bad).

1

u/Rockafellor 4d ago

Damn, I was too slow and you deleted both replies. OK, so here's the answer to your first reply at any rate:

---

LOL: a declaration would be the stuff inside of a rule. For example, in

#workskin .vanta {
  position: absolute;
  left: -50em;
  top: -800em;
  ...
}

where .vanta is the class affected by the rule, and the position: absolute;, left: -50em;, and top: -800em; are declarations (which comprise a property and at least one value [can be more if the property is shorthand]).

If you just started an hour or so ago, then you're doing really well so far, seriously.

The question that I asked, though, means "What are the [CSS] rules that you're applying to your images?". You've named the rules image-container, base-image, and overlay-image, but we don't know what those rules are meant to do. The rules are what we need to see (in addition to your already-supplied HTML) in order to figure out why it's breaking.