Question

I’ve got a client that is insistent on using two images as their background image, where the first one tile’s the width of the screen then the second one has a fade out at far right. The client is insistent on using that fade out on the farthest right side to finish off so it doesn’t look weird.

His tile background image is 600px wide, this is a zebra pattern! So it has to line up.

So to get the last image to line up right with the pattern I have to somehow using JS tell it to place that last Div at the farthest most multiple of 600px from the right of the screen. I’ve got the div positioning from the right, what I cannot get in JS is to calculate what pixel from the left is the farthest most multiple of 600.

I’m racking my brain here and can’t figure that one out, how to calculate from a large number what the last multiple of 600 is.

Any ideas?

So if a screen is 1235 wide from left side to scrollbar then the farthest most multiple of 600 is 600 🙂

But if a screen is 2564 wide then the farthest multiple of 600 would be 1800.

Answer 1

First divide by the number you want a multiple of, then floor or ceil depending on your needs, then multiply by the number again. This will give you the nearest multiple below (respectively above) of the given number.

However, I personally did something not so different from this. I had a parallax scrolling background effect, and on the sides of the screen I had a gradient from transparent to a solid colour to fade the background out before it hit the edge of the screen. This was done simply by adding a background image with the gradient at the side of the screen, no calculation needed.