gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Image Sprites (#30972)

Browse Source
This commit is contained in:
Imam Wahyudi
2018-12-17 10:42:16 +07:00
committed by Randell Dawson
parent 1231b416c7
commit 10aad759db
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
guide/english/css/css-images/index.md
View File

@@ -44,6 +44,19 @@ It is advised to change any one parameter, either height or width, to get a prop
<a title="The <image> CSS data type represents a 2D image. There are two kinds of images: plain images, typically referenced using a URL, and dynamically-generated images, like those generated with <gradient> or element(). Images can be used with numerous CSS properties, such as background-image, border-image, content, list-style-image, and cursor." href="/en-US/docs/Web/CSS/image"><code>&lt;image&gt;</code></a> <a title="The <image> CSS data type represents a 2D image. There are two kinds of images: plain images, typically referenced using a URL, and dynamically-generated images, like those generated with <gradient> or element(). Images can be used with numerous CSS properties, such as background-image, border-image, content, list-style-image, and cursor." href="/en-US/docs/Web/CSS/image"><code>&lt;image&gt;</code></a>
<a title="The documentation about this has not yet been written; please consider contributing!" href="/en-US/docs/Web/CSS/uri"><code>&lt;uri&gt;</code></a> <a title="The documentation about this has not yet been written; please consider contributing!" href="/en-US/docs/Web/CSS/uri"><code>&lt;uri&gt;</code></a>
##### Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
```
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
```
#### More Info: #### More Info:
<!-- References for more information on CSS images --> <!-- References for more information on CSS images -->
- [CSS Images, developer mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/image) - [CSS Images, developer mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/image)