CODEWITHSUNDEEP
cssimageparallax
Jason
Jason

Reputation: 534

How to have image fill container during parallax scrolling and no-repeat?

The offending website: http://www.jasonmfry.com. The corresponding codepen: https://codepen.io/Auslegung/pen/Roapwv.

Scroll down until you can see a half inch of the image at the top of your screen, and you will notice another half inch of white above that. I want the images to fill the container and not leave that white space above themselves. I have tested this on the latest Chrome and Safari builds on Mac. On iPhone Chrome and Safari there is no white space, fwiw.

Removing line 88 of styles.css background-repeat: no-repeat fills that white space with the bottom of the image, but of course I don't want that. Reducing the scale value on line 94 transform: translateZ(1px) scale(1.08) will reduce the amount of white space shown, but at the expense of the parallax scrolling effect. How can I get the images to fill up that entire area, while still exhibiting parallax scrolling?

I've done a lot of googling and experimenting and haven't been able to figure anything out. Let me know if I'm missing any info that you need to help me out. I'm also having issues with image ratio during browser resize but that's another question altogether.

Upvotes: 1

Views: 1642

Answers (1)

RobertAKARobin
RobertAKARobin

Reputation: 4258

I used to be a WDI instructor, and actually probably would have taught your particular online class but left to go work on other things. Kudos on using StackOverflow! Say hi to Marc, Matt, and whoever else is around. :)

The issue here is that by default scale resizes things relative to the center of the element. You want it to center things relative to the bottom of the element.

Putting it another way: think of scale as sending out little arms to the edges of your image to pull in the edges. By default, the arms reach out from the center of your image and pull in all its edges equally. You want them to reach out out from the top of your image and "pull" up the bottom edge.

TLDR, just add this line: transform-origin:bottom;!

Edit:

The issue here is actually with the dimensions of the images themselves.

As long as the ratio of the window's height/width is greater than the image's height/width you won't have any issues, but once the window's ratio is smaller than the image's ratio you'll see that whitespace.

Your headshot is almost square, whereas the other images are very rectangular. If your browser window is wider than it is tall the headshot will behave, but resize the window to be taller than it is wide and you see the whitespace again. Conversely, make the window much shorter than it is wide and all the images will behave themselves.

You could resize all the images to be narrow and tall. The largest aspect ratio on devices is 16:9, so make the images <9x wide and >16x tall and you should be good.

Unfortunately I don't think there's slicker solution for this other than using Javascript.

Upvotes: 2

Related Questions