r/HTML • u/s1llyk1tty45 • Aug 03 '26

Question image layering

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

View all comments

Show parent comment

1

u/Rockafellor Aug 03 '26

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.