I have a background image that is 2800 pixels wide. It is for a blog. The client needs to stay pixel perfect, meaning that the image cannot scale when viewed on different screen resolutions. The image needs to stay centered and on smaller screens, the sides will be cut off. I have 4 custom image sizes for 1024, 1280, 1600 and 1920. Anything over 1920 will get the full image.

I need help figuring out how how to utilize all 5 images. I believe that a media query will do it, however, I have very limited experience with them. Basically, what would be the best way to code the css to pull the correct image for the proper screen.

It is a wordpress template. The temporary address is www.ninja.fullerdesigngroup.net. The image that is in there now works perfectly on my 1350 screen.

Can someone help me with this?

THANKS!


jf