CSS background setting background picture technique and Sprite application

What does background mean, translation comes with a background meaning. Also in CSS as a member of the CSS property is also a background meaning, and is to set the background picture, background color, background image interception and other styles.

First let's look at the values that background have (see background in the CSS Manual for details)

You can set the following properties in order (click to enter the appropriate CSS manual to view the use):

Background-color background Color

Background-image background picture

Background-repeat Background Repeat

Background-attachment background picture is fixed or scrolling

Positioning of background-position background picture

Next, we'll focus on how CSS background is usually used.

First, let's take a look at the following code

Background:url (bgimg.gif) no-repeat 5px 5px;

The following figure explains

From the CSS background diagram, we can learn more about background CSS property usage.

Background:url (bgimg.gif) no-repeat 5px 5px; CSS background expressions can save and optimize CSS file code.

Learners can use and test changes background each attribute to understand and master about CSS background

The application of CSS Sprite

What is CSS Sprite?

I do not know if you are browsing Yahoo.com's Web page, whether you notice that Yahoo in the page production technology and most of the site is not the same, they put the ICON on the page, column background ah, picture buttons Ah, and so there will be a rule of the merger of a background picture, Then use background-position to achieve background image positioning, why they spend some time to merge these CSS background pictures, CSS in a background map to do the technology of the page what is the advantage?

Usually we call it CSS image mosaic technology, of course, some people put CSS sprites called "CSS mapping positioning."

The benefits of using CSS Sprite?

The goal of CSS sprites (image integration technology) is to speed up page loading by consolidating images and reducing the number of requests to the server. As shown in the following illustration:

Implementation method:

First, the small picture is integrated into a large picture

Then according to the specific icon in the larger picture position, to the background positioning. background-position:-8px-95px;

Picture optimization

I recommend using PNG8 for non animated GIF because it can do the same thing and save you 10% to 30% of the file volume.

Second, Photoshop compared to fireworks, the export of the same quality PNG pictures, the volume will be slightly larger. While fireworks did the corresponding compression optimization, but did not achieve the best compression.

Third, I know the design software, for the PNG image processing has not been the best compression, picture volume also has a certain compression space. You can try to do lossless compression optimizations using the Image optimization tool described below.

Four, picture volume and size, the proposed volume is kept within 100K (more in line with national conditions best request size), size is 800px (best size).

CSS Sprites Picture Cutting technique

Third, the CSS sprites picture in the color closer or the same combination can reduce the number of colors, because the small number of pictures file volume will be relatively little.

Four, the size of the same CSS sprites picture left a large gap, to a certain extent, most of the situation will increase the volume, so the CSS sprites pictures do not have gaps.

In the same size CSS sprites picture, the vertically arranged picture will be larger than the horizontally arranged file size.

In CSS sprites pictures, the horizontally arranged picture will be larger than the vertical file size.

Nine, gold cutting bit: In the CSS sprites picture of the most right or left for the most flexible position of the most suitable for positioning the text before the icon, so will not be subject to other CSS sprites picture interference, also do not need to reserve a certain line width.

The following is Apple's app

How to make it?

The basic principle is to use the negative value of background-postion to adjust.

When we locate in the background-position:-50px-50px, the picture is moved to the left, and the top left corner of the div is centered, the figure moves 50PX to the left and 50PX to the right.

Reference point: Take the picture as the Origin point (0,0).

The following pictures >>>> positioning

Use the fireworks tool to locate the picture.

code example

Background-position: -396px-116px;