sphinx's ongoing n00b questions (currently: overlapping graphics)

[sphinx]

I used to tinker with myspace, livejournal, and neopets & gaiaonline pages but I've pretty much forgotten everything I learned from back then. I'm starting a simple page for my vintage pony collection as a springboard for re-learning stuff. Here's what I have so far:

https://stellaluna.neocities.org/home

It goes without saying that a lot of what I have so far is a simple base that I modified the heck out of. Right now the thing that's stumping me is I want to have Autumn Skye there in the far right to mostly overlap the image at the top but I don't know how to do that yet. My impulse is to go in and combine the graphics in photoshop as a single .png with transparent bits, but I know I'm not learning anything if I do that. So any help is appreciated.

I'd also like to have every page's heading ("Stellaluna's Pony Page", for example) to overlap the image at the top but one thing at a time.

I will surely have more questions later but this is the focus right now.

[Melooon]

So the way you'd do this in classic CSS is to put both the header image and your pony image in a DIV, set the div as position "relative", then set the pony as position "absolute". Absolute position will always be absolute relative to the nearest parent "relative" position element.

With inline CSS, it would look like this for you! (see the attached screenshot too)

Code

<div style="position: relative;">
<img src="g3_background.png" style="width: 100%;">
<img src="autumn_skye.png" style="position: absolute;bottom: -50px;right: 20px;"></div>

Then you can just tweak the bottom and right values of your pony to get it where you want it; its position should scale with your page too depending on how you code the header width in.