Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm in the process of developing a website that is reminiscent of an old CRT monitor. To achieve the effect, I've taken an image that consists of a horizontal black line and a white line repeating both on the vertical and horizontal axis. The image opacity to achieve this effect has a very low opacity so that you can see the text beneath the lines.

enter image description here

It works beautifully every computer I've tested it on, except for one. I have a high end nVidia video card on the machine that the problems occur on. It appears that the high resolution actually creates a wave effect from the lines. They fade in and out, vertically, creating a very unpleasant effect. When the resolution is turned down very low, the bad-effect goes away and the screen appears as I intended.

It appears that the high resolution is making the lines merge together, giving it a fade-in fade-out gradient effect.

I can't demonstrate the issue because it's computer dependent and looks different depending on what system it's being viewed on. Some users here may see it, while others may not.

Has anyone experienced this issue, and is there a way I can overcome this in my design?

share|improve this question
    
This isn't really a User Experience question, I don't think. It's more of a Graphic Design one. –  JonW Apr 3 '13 at 14:01
3  
@JonW It's a user experience question because if I don't fix it, the user with experience a seizure. :) –  George Apr 3 '13 at 14:05
    
Take a picture with a camera to show us. The already posted answer is surely the solution though. Basically something's causing the image to be scaled up or down. Either way it will mess with the pixel alignment. –  Steven Lu Apr 3 '13 at 15:38

1 Answer 1

up vote 5 down vote accepted

You are experiencing a problem with a Moiré pattern as a result of Aliasing.

This can be solved by using larger spacing between the lines in the image when it is used on a higher pixel density screen; by softening the image slightly; or possibly by adjusting the aliasing settings on the high end graphics card.

I suggest taking a look this article on Image resizing for the web, which deals with moiré patterns and how to avoid them.

share|improve this answer
    
Thanks John, you nailed it. –  George Apr 3 '13 at 14:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.