Fixed image does not center anymore

Hi guys, somehow centering a fixed image does not work, can you please have a look into it?
It’s about the profile pic right after the hero section.

Thanks in advance!


Here is my site Read-Only: LINK

Here a dropbox link showing a video of the problem: Dropbox - File Deleted

Hey createspot

Can you share read only link? so we can better understand your class settings and resolve it.

Hi @miekwave, do you have any idea?

@cyberdave do you have any idea why it’s not working properly?

Hi @creatspot

Thanks for posting.

I’m chatting with our in-house CSS wizards now to see if this is a bug, or if it’s just how this sort of design would function even if coded by hand.

I’ll get back to you as soon as I have more info :bowing_man:

Hi @Brando, thanks a lot – let’s see what they find out!

Hi @Brando, did the Wizards find a solution?

@creatspot

I pinged the team on this. So far this kind of looks like expected behavior.

Pressing fixed fixes the image to the viewport itself rather than the parent element. So pressing center in the positioning settings will move the image to the center of the viewport which is why you see the image move over to the right like it does.

If you want to keep the image centered in the parent element, I think you’ll need to change the positioning styles like you have.

I hope this helps :bowing_man:

Hi @Brando,
thanks for the answer. It’s working for medium sized screens with the positioning styles I used.
Unfortunately it does not center for larger images. Any Idea how to solve this?

There is no way to do what you want to do with background images simply because fixed-back will not adhere to any element other that browser window, and trying to move element manually like you did will result in very imprecise placement. Your best bet is to go with parallax interactions without trying to rely on fixed backgrounds.

1 Like

Hi @dram,
thanks a lot for your comment. Do you have any idea how to achieve something similar using the parallax effect?

Do you know how the parallax can be achieved in WF?

Yes but I cannot imagine yet how to achieve the same effect as the fixed bg effect. Do you need a “mask” for it that you place above it?

If you need it to be in a circle then just put your image inside a div with border-radius: 50% and overflow: hidden. Also make sure that your image is larger than this div. Then just set a parallax to target this inner image and make it scroll slower than the standard scroll. This way your picture will reveal itself slightly with the scroll.

But just so you understand - fixed background wouldn’t do you no good. Just try to imagine WHAT you want the reveal to look like, and you will understand that it is impossible anyway - you cannot reveal your photo in a way that won’t look like only a small part of your main photo at any given time and that’s just ridiculous if we are talking about portraits.

2 Likes

Hi Dram,
thanks a lot – I got it working exactly as I wanted it to look like :slight_smile:

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.