From 10aad759dba3bd0e156022268ca44cbb16b63719 Mon Sep 17 00:00:00 2001
From: Imam Wahyudi <imam.wahyudi1995@gmail.com>
Date: Mon, 17 Dec 2018 10:42:16 +0700
Subject: [PATCH] Image Sprites (#30972)

---
 guide/english/css/css-images/index.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/guide/english/css/css-images/index.md b/guide/english/css/css-images/index.md
index 3a53b622b14..236e15002f6 100644
--- a/guide/english/css/css-images/index.md
+++ b/guide/english/css/css-images/index.md
@@ -43,6 +43,19 @@ It is advised to change any one parameter, either height or width, to get a prop
 ##### Datatypes
 <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>
+     
+##### 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:
 <!-- References for more information on CSS images -->