The Parallax is Blank, There's No Photo Like I Coded It To

Hi guys!

I started to update my resume and then came across the problem that my parallax images were not working for the Portfolio and Contact Me.

The code is in Github: https://github.com/infinite-dreams/infinite-dreams.github.io

If you need more explanation, please reply!

Thank you!

  • Zoe K.
1 Like

Hi @infinite-dreams,

This is your resume for me:

What do you mean for problem with parallax?

-Gabriele-

Mark helpfull posts with Accept as Solution to help other users locate important info. Don’t forget to give Kudos for great contents!

1 Like

Hi @wabri !

I mean if you scroll down, you would see this:

So what I was asking was, how do I fix this? And I don’t know how to do it.

… and this is what I see in Brave (Chromium) and Windows 10.

I have no idea what you mean by a “Parallax Image”: you want to use an image format (webp, jpeg, png, gif) which works for most browsers.

As the images in your portfolio section are all .webp files, you may be facing a limitation of your browser of choice. When authoring web pages, it’s always wise to try to use features that will work in the browser(s) you want to support. See, for instance, https://caniuse.com/ for information on what CSS, HTML, etc are supported in specific browsers or versions.

Another piece of free advice: make your page smaller. Your header image is pretty large - try it on a mobile device (e.g. iphone, android phone/tablet) and see how it looks.

2 Likes

Hi @fire-eggs !

I have already tried on Kindles, phones, ipads, and laptops and they look fine. I’ll change it to jpeg or png images; and if you see the code on my GitHub, there is a parallax. I’m using the w3schools template as well.

2 Likes

OK, my ignorance was showing. I had to research “parallax scrolling effect” to understand what you were referring to.

I’m guessing here, but looking at the W3schools example , I’m not sure you’ve got it quite right. They mention that the body, html and image styles must have the same height value, which you did not do.  You might be trying to accomplish something else, in which case you need to provide more details.

3 Likes

Oh, now I see. Thanks @fire-eggs ! The problem is solved now!