After checking my website's page speed on Google Page Speed, I received the recommendation to combine images into a CSS sprite along with a list of images.
I have diligently researched every available link and article on this topic, many of which provide examples as well.
In my implementation, I utilized jQuery to call images without an HTML reference to the class where they are located.
Below is a snippet of sample CSS code for handling one image:
.theme-default .nivo-controlNav a { display:block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; }
The nivo-controlNav class is not explicitly referenced in the HTML code but is indirectly called by jQuery.
I now have the CSS sprite image and its corresponding CSS code, but I am unsure about where and how to integrate it within the HTML code structure.
As someone new to CSS, any guidance or suggestions would be greatly appreciated. Thank you.