css controls gif image as background of web page_html/css_WEB-ITnose

I was researching a website recently
and found that the background of the website is all placed in one gif image
But the page can use a certain part of the gif image as the background of a certain part of the page
Now it can be displayed correctly in the original webpage, but it cannot be displayed in the webpage I made myself. There is no problem with the path
A piece of css code is as follows:
.page-nav {
background-image:url(/ images/bg.gif);
background-position: left bottom;
height: 33px;
}
This is the first time I’ve seen this kind of technology. Please give me an expert’s answer

Reply to discussion (solution)

Positioning and height and width of elements

This is css sprite technology
You can check the relevant information online, There are many.

CSS Sprites (CSS image stitching technology)

http://www.chinaz.com/web/2009/0525/77212.shtml

You can refer to it

Images need to be positioned

CSS Sprites (CSS image stitching technology)

http://www.chinaz.com/web/2009/0525/77212.shtml

You can refer to it

Pictures need to be positioned

You can reduce the number of requests