• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

14.11. background-size

The background-size property is intended to give the Web author more control over the exact sizing of a background image. This is a much welcomed property as it enables the Web author to precisely size the image under the intended space in which it is to serve as a background.

It can take three types of value. auto, a specific set of numerical values or a percentage value. The auto value is the default, and sets the image to display at its normal size. The property can also take either a single or a pair of specific length values; if a single value is specified it is applied to both the width and height, and if two values are supplied they specify the width and height, respectively. So a value of 50px sets the image to a square 50 pixels on a side, whereas a value of 50px 100px sets the background image to a size of 50 pixels in width by 100 pixels in height. The background-size property can also take a percentage value, which is applied relative to the box containing the image. A setting of 100% stretches the image to fit the height and width of the box it is contained within. A setting of 50% ensures that two background images fill the space, a setting of 25% gives you four background images and so on. The following code snippet shows how this property could be used (its effects illustrated in Figure 14-16):

table.example1 {background-image: url("caligula.jpg")    
background-size: auto}
table.example2 {background-image: url("caligula.jpg")    
background-size: 100px}
table.example3 {background-image: url("caligula.jpg")    
background-size: 50%}

Figure 14-16. Mock-up illustrating several effects of the background-size property.

As you can see from Figure 14-16, the auto value depicts the original size of the image, a value of 100px sets the image to a size of 100 pixels square, and then begins to tile it, and finally, a value of 50% puts two sets of the coin image stretched across the background of the table.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint