Skip to main content

Posts

Showing posts from October, 2021

How to install Nginx Proxy Manager on proxmox 8.3.2 container

how to use sprite image in your code

Sprite image                Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because the website won't need to request each icon as it can load the image with a single request. How to use sprite images:                The basic idea behind the sprite usage is to load the image using CSS and set the position of the image relative to the icon's position. e.g. if an image is 200 * 800 size with each icon being 200* 200 in size. Then the image would have 4 icons. we can use the first icon by using the span icon's background property and setting the background position to 0 0 coordinates along with its width and height to be 200 * 200. Example    HTML     <span class="twitter-icon" ></span>      CSS .twitter-icon : { background-image: url(" path of image"); width:200px; height:200px; background-positio...

how to create Sprite image online

  Creating A sprite image online How to create a sprite image what is a Sprite image:                         Sprite images are two-dimensional or one-dimensional multiple images combined together to form a single image. These are created by combining a number of small images together to form a big image. Sprite images can be created in one dimension(vertical or horizontal) or two-dimension depending on the number of images. Horizontal Sprite Image Vertical Sprite Image Two dimensional sprite image WHY Sprite image :                     Now a days, Almost all the websites includes icons and images. These images are loaded by making HTTP request to the server. If a website contains many different images and icons, it will cause to many http request which is not good for website. Creating a sprite image solves the problem as it is a single image consisitin...