Settings for background pictures

Before you know the technique of setting up all the backgrounds in a page with a single image. The principle is simple, using background-potision to pinpoint the position of the image. The benefit is to reduce the number of HTTP requests on the page. Frankly speaking, I do not think that this technology is worth popularizing. Although the number of HTTP requests is reduced, this improvement is largely invisible to 99% of sites. In addition to superior's large web site, traffic is huge, reduce the number of HTTP requests can see the effect, the vast majority of sites do not need this technology. Compared to the almost invisible benefits it brings, it has a lot of disadvantages. First of all, to focus on a large picture of all the small pictures, this one more step, and the position of the picture once set is difficult to change, because if you want to change the position of a picture, the result is a series of image position adjustment, the entire page background may crash all!!! Is all!!! In other words, its maintenance costs, and adaptability are very poor! And the picture between the placement, how to make the page within the small icons can be the most densely arranged so that the whole picture size can be as small as possible is a problem to consider, very headache. Then talk about the difficulties of technical implementation. A key problem is that the precise location of the image is not complete, the image tile and the size of the container adaptive is a very troublesome problem. That is, if a container is large in size, and we have a small background for this container, we have to consider that if the container's background will be tiled, it will affect our effect. We can set the no-repeat to prohibit the background tile, but if the size of the container is larger than the maximum value we set, will you pull the picture next to the background? One solution is to give each adaptive size container, when placing the background map, try to leave a large enough space around the background map. But as a result, the small pictures will be scattered in the big picture, and we would like to let the "dense concentration of pictures together," the purpose of the conflict. What do we do? Today, I looked at the site of this technology and found that they used a 1 * 1-megapixel transparent GIF image! This is a very interesting method. If a large container needs a small picture to do the background, they will not directly set the background of the large container, then leave a lot of blank, but to the 1*1 gif picture to take a class or ID, with CSS control its size and background. It's a clever use. Because for block-level elements, although the size and length can be defined, but it is a single row, if you use float to make it and other inline elements in a row, you need to clear the float and so on, very troublesome. If it is an inline element, there is no way to set the length width. Very good inline-block but do not get IE6 support, in order to be compatible with we can not set the element display:inline-block; Fortunately, IE does not support CSS settings displAy:inline-block the engine still provides such styling support for some elements, including img,input and table. Use 1*1 pixels of GIF to set the length and background, so that you can achieve Display:inline-block

Settings for background pictures