![]() The displayed image will be the background image that we specify in CSS width: 43px, respectively 43px height – defines the portion of the image we want to use background: url (sprites.gif) 0 0 no-repeat – defines the background image and its position (left 0px, top 0px) with the property no-repeat. In the lines below we will provide a simple example in which we will use our CSS image sprites.gif:īackground: url(sprites.gif) 0 0 no-repeat īackground: url(sprites.gif) -89px 0 no-repeat īackground: url(sprites.gif) -43px 0 no-repeat During this article, we will use the first one of them (sprites.gif), which has 132x43px dimensions: Below are three sprites images created using the CSS Sprites Generator. With CSS, we can display only the part of the image that we want to use or display. So, instead of using 3 individual pictures, we will use a single image instead. Using sprites of images will help you reduce the number of requests to the server and will save bandwidth. A web page with multiple images can take longer to load and generate more server requests. ![]() Therefore, a sprite is a collection of images gathered in a single image. This greatly reduces the overhead of obtaining more images. ![]() CSS Sprites help you get the image once and move it around and display parts of it. The computer can bring graphics to memory, then only display parts of the image at a given time.Ī Sprite is basically a combined graphic. The term “sprites” comes from a technique in computer graphics, often used for video games. Given that you will create a great image, the sprite may seem a little wrong, but sprites should help clarify things. Using CSS Sprites is a way to combine multiple images into a single image file for use on your website in order to help performance. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |