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:

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:

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.