css background image

Hi,

I am building website in wordpress.

I am customizing it, however when I try to check some of the image in order to replace them I could not find them.

Well I see them in the browser, but when I use the google chrome inspect element, I don't see any image.
This is the website:
http://hamaakav.co.il/

I am talking about the six white squares, they have background around them, but when I inspect this I find no image tag.

I try to check their css file and I find the following line:

#slider-nav li a, #slider-nav li a:visited { display: block; width: 145px; height: 85px; background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -242px; padding: 30px 0 0 15px; }
#slider-nav li a:hover, #slider-nav li a:active, #slider-nav li.activeSlide a { background-position: 0 -77px; }

When I check the file periodic-sprite-02.png:
http://hamaakav.co.il/wp-content/the...-sprite-02.png

But this file show me a lot of images that I don't see at all.
instead in the website I see a gray square around the white square?

I want to replace the gray square with something else, But I don't think that editing the file will solve my problem.

What exactly is the image file that is used there?

This is my main question.

The page is using a method called a CSS Sprite to produce the background. Sprites let you use a single image file for the background on multiple elements by using background position controls. By putting many background images in a single file this way, it speeds up the page loading because there is only one file called from the server and the single file is sometimes smaller than the individual files would have required.

rtrethewey

Thanks I am studding the subject.