CODEWITHSUNDEEP
htmlcssbackground-imageparallax
Anchith Acharya
Anchith Acharya

Reputation: 442

Multiple background positioning in CSS

I am trying to do this fun resume site and am stuck with the backgrounds itself. I have 3 backgrounds in all: a picture with a mountain and some sky, another picture with just the mountain cut out, and a nice little Easter egg hidden in between. I made the front and back layers scroll-able, and the middle one fixed, so the little dickbutt hides behind the mountain when the user scrolls down.
But the problem is, the dickbutt image is somehow not positioned properly even if I manually positioned it in Photoshop before saving it as an image. So I used the background-position tool to set it right, and it's all right now, except, it is so just for that specific browser size. In the mobile view, not only is the background not centered on the mountain peak, but the dickbutt is way off with respect to position.

TL;DR: I want to position one of my multiple backgrounds with respect to one of the other backgrounds, but instead it is getting positioned with respect to the viewport. What should I do?

Here's my code: (github link)
I want the page to look like this:An unmissable reference, but still hiding the NSFW part!

Upvotes: 1

Views: 73

Answers (1)

Abdullah Khan
Abdullah Khan

Reputation: 645

There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index

Upvotes: 1

Related Questions