CSS Sprite, background-size, Retina screen detailed

I've written earlier how to optimize images under the retina screen.

How to optimize the image under the Retina screen from CSS3 's background-size, this paper introduces the method of Background-size attribute usage, then goes to the point, and introduces the image optimization under the retina screen. If you are not familiar with the Background-size property, it is recommended that you understand it first. Background-size is a very important attribute, whether it's the previous article or the one you're going to introduce today. In other words, background-size plays an important role in the display of images under the retina screen.

Desert

In the article on how to optimize images under the retina screen, Josh Byers introduces an example, in which Josh Byers says, "You can provide a high-resolution image for a Retina screen device through CSS3 Media queries."

Although this approach is shown through multiple images, it adds to the workload, but I believe that this is the best option for end-user service. Because only the Retian screen device users to provide a high-quality image.

To do this, we need a new kind of technical support, which is the background-size attribute of CSS3. I did not elaborate on the context of this property, but simply introduced it through some exercises.

As a bonus, I'll show you how to use Background-size to make the high-resolution picture Sprite (Sprites) display perfectly on the retina screen.

What is the Background-size property?

The Background-size property is a newly added background property of CSS3, which, like his name, allows you to control the size of the background image by this property.

Background-size has several property values that allow you to set the size of the background picture:

You can use the pixel (px) value, the first value sets the width of the background image, the second value sets the height of the background image, and if you set only one value, the other defaults to the "auto" value.

{   background:background-size:Height:width:400px;}     

You can also use a percent value (%), and when you use a percent value, the size of the background is calculated relative to the width of the container . As shown in the following example, the width of our container is "400px", and when we set the value of "background-size" to "25%", the width of the background image becomes "100px".

{   background:background-size:Height:width:400px;}     

The "Cover" value lets you zoom in on the background image to fill the container.

{   background:background-size:Height:width:400px;}     

The "contain" value allows you to zoom the background image to the maximum width and height and keep the entire background image inside the container.

{   background:background-size:Height:width:400px;}     

Background-size value for "contain" understanding a bit ambiguous, he let the background image can be scaled, which is based on the size of the container to zoom in, there will be two cases, when the background image is placed to the maximum width, the background image reaches the container width, but does not reach the height of the container, will be relative to the width of the container, its height will not continue to enlarge, the other case is when the background image is enlarged to the maximum width, the height of the background image is the same as the height of the container, then the height of the container is relative, its width will not continue to enlarge.

For detailed use of the background-size attribute of CSS3, you can click here.

Desert

Use the Background-size property under the Retina screen

As I said, Apple launches the Retina screen display technology, and they don't want to make the same physical size under the normal display smaller on the Retina screen. The icon size shown under the IPhone4 screen is the same as under 3G S.

To accomplish this, the size of the retina screen image will double. This way, if the image is not doubled in pixels, the image will become blurred under the retina screen device.

To counteract this, we need to double the pixel size of the image and then use the Background-size property to control his size so that it shows a consistent effect on the retina screen.

For example, I want to create a logo that fills in a "100px x 100px" container, so I need to make and upload an image with at least twice the pixel.

In our example, the actual size of the logo is "500px x 500px". If I fill the logo image as a background in a container, and do not use "background-size" to set the size of the background image, the container will crop the background image.

{   background:height:width:100px;}    

Obviously, we can use the "Media Queries" query device "pixel Rotio" is not "2", this background image is only used under the Retina screen device.

We will also set the value of "background-size" to "100px 100px". In fact, the image we used under the Retina screen device was "500px x 500px", but it was "100px x 100px" in the browser that was shown on the CSS.

@2) {  background:background-size:Height:width:}}     

Now, if you have a line with less than 1px in your graph, you will have some problems with shrinking the size. You need to experiment with the situation.

Where's sprites?

Can I create a sprites chart that has both normal and high-resolution images?

You can, but you still have to face the annoyance of your users downloading a large image under a slower bandwidth. You also have to face IE9 the following browsers do not support Background-size's troublesome problems.

You'd better create two different sprites graphs for high resolution and normal resolution, respectively. This time there are different voices, this is not to increase the workload? But this is really not, in my workflow, I will first create a high-resolution sprites image, then make a copy, and scale the size half. When an image needs to be updated, it only needs to process the image at the high resolution again, then copy and reset it to half the size saved.

When my sprites image is 300px, how do I specify Background-size as 32px? In fact, it is not difficult, just a little bit of mathematical calculation, this is a very elementary process.

In our example, we use the media social icons. I want them all to be displayed at 16px x 16px in size. We'll create a sprites image that fits the retina screen device, doubling the image size (32px x 32px) and saving him. In order to ensure that the ordinary display device image displays, on the basis of this image to do half of the reduction.

In the original CSS style, none of the property values of background-position need to be set, because their default value is "0", as follows:

#social-icons. Facebook{background: url (images/social-sprite.png); span class= "rule" >background-position-x: 0px; span class= "rule" >background-position-y: 0px; span class= "rule" >height: 16PX; width: 16px;}  #social-icons .facebook:hover { span class= "rule" >background-position-y:-16PX;                /span>              

For our Retina screen display, we must declare a media Queries dedicated to the Retina screen device display. We also change the background size rather than the width and height.

So, the most critical question is, how do we know what the Background-size property value is set to?

Here's a formula.

High resolution image Width/target Image width = x Original sprites image width/x = background-size Width value

Instance talk

Our high-resolution icons are 32px x 32px;

The width of our target image is "16px";

The total width of our sprites image is "96px"

According to the preceding formula, we can know

32/16 = 296/2 = 48

The last thing. We only calculated the width of the background image, and to ensure that the background image scale is normal, we set the height value to "auto". Of course you can also set the value of the phase (set the Background-sizer width to auto, the height is the specific value), but I find it easier to set the width.

@Media screen and (-webkit-min-device-pixel-ratio:2), screen and (Max-moz-device-pixel-ratio:2) {#social-icons. Facebook{Background URL (images/social-sprite2x.png);Background-position-x:  0px; background-position-y: 0px; background-size: 48px auto; span class= "rule" >  #social-icons .facebook:hover {background:  URL (images/social-sprite2x.png); background-position-x: 0px; background-position-y:- 32px; }               /span>             

Of course, there are many ways to achieve the effects of this article, and they each have their own pros and cons. I personally think that, so far, the use of media queries and high-resolution sprites is the best choice.

This article transferred from: http://www.w3cplus.com/css/css-background-size-graphics.html

CSS Sprite, background-size, Retina screen detailed