Home/ Questions/Q 8072593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:04:09+00:00

Not exactly sure how to phrase the question in the first place here but

  • 0

Not exactly sure how to phrase the question in the first place here but I’ll give it a go.

I have an image that I want to fixed-scroll down the page, which I want to change colour smoothly as it enters a second div with a different coloured background. I’ve got the divs sorted, the images placed perfectly and the effect I want working excellently – my only problem now is that I cannot align the two images for the life of me, due to using percentages etc.

I have a working example here you’ll certainly need to look at – jsFiddle – you may need to resize the page around a little bit to understand the particular alignment issue I’m having. The top “Hello” sits a set amount off-center, which I want to achieve with the second “Hello”. I just can’t get it to happen! Any suggestions? I’ve been looking at possible jQuery solutions but no luck so far.

Thanks heaps for any answers. Cheers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well. Seems I found a solution, though I wouldn’t call it ideal. It works well though! After Chad said to try background-position: left center; I realized if I simply put the image as background-position: center; and made the image have a bunch of blank space to one side, with enough twiddling on photoshop I’d manage to line the two up. Works great now, lines up perfectly in all my browsers.

    Here’s the example – jsFiddle (though you cant see much of a change in it, as it’s the image itself that had to be altered.)

    Thanks for the replies guys.

    • 0