Search code examples
htmlcssstylesheet

How to fix background image?


I am using a background image and repeating it. When it hits the second row, it seems to lose opacity. Funky! I have never seen this kind of behavior before. I have made lots of little tweaks but nothing seems to fix it.

What would cause this? How can I fix it?

You can see it here: http://movies.evikjames.com/

(If you are reading this an hour after this post, don't expect to see the issue.)


Solution

  • This is an optical illusion. Take a screenshot of the page, open it in an image editing program, select the top of one of the images in the bottom row, and drag it up towards the top of the image. You will see that the top row is indeed the same color/opacity as the bottom row.

    I believe the section of the Wikipedia article on optical illusions titled "Colour and brightness constancies" has information on similar illusions.