CSS smart use of the Background-Position property
Introduction
Generally this property is used to move a background image or a gradation of color inside its container.
Code example:
html {
background-position: 100px 5px;
}
For more information about this property, refer to the link of W3Schools.
How to insert multiple images into a web page with a single image file using the CSS Background-Position property.
In my case I used it to move an image that contains several icons at the same size (32px x 32px), I aligned them with Photoshop in order to create a rectangle 3 x 4 icons with a total size of 96px x 128px with this final result.
At this point in the HTML I created several divs as many as the icons to show, I associated the div elements with the .sw-item class with these style parameters.
.item-sw{
width: 32px;
height: 32px;
margin: 10px 10px;
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url('sw_96_128.png');
}
Note in the code the div element is a block of fixed height and width of 32px as much as the individual icons in the image file will be.
In each div I moved giving an html style attribute in x and y of the correct size to frame the icon concerned, the origin x = 0 and y = 0 of the image is in the upper left corner.
The HTML code is written in this way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS Background-Position</title>
<meta name="description" content="TestCSS Background-Position">
<meta name="author" content="Agron Merseli">
<style type="text/css">
.item-sw{
width: 32px;
height: 32px;
margin: 10px 10px;
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url('sw_96_128.png');
}
</style>
</head>
<body>
<div class="item-sw" style="background-position: 0 0;"></div>
<div class="item-sw" style="background-position: -32px 0;"></div>
<div class="item-sw" style="background-position: -64px 0;"></div>
<br>
<div class="item-sw" style="background-position: 0 -32px;"></div>
<div class="item-sw" style="background-position: -32px -32px;"></div>
<div class="item-sw" style="background-position: -64px -32px;"></div>
<br>
<div class="item-sw" style="background-position: 0 -64px;"></div>
<div class="item-sw" style="background-position: -32px -64px;"></div>
<div class="item-sw" style="background-position: -64px -64px;"></div>
<br>
<div class="item-sw" style="background-position: 0 -96px;"></div>
<div class="item-sw" style="background-position: -32px -96px;"></div>
<div class="item-sw" style="background-position: -64px -96px;"></div>
</body>
</html>
The final result after the browser processing.
Conclusion
The main reason to use this method of grouping images is when the icons to be shown are many and of the same size and are to be shown in various parts of the site. In this way the server will not be not overloaded by multiple requests for all the individual image files, and in the cache memory only one single image file will be stored which will speed up the opening and displaying of the web pages in the client.
- L'IA può portare all'estinzione, l'allerta di decine di ricercatori 2023-05-30Tra i firmatari gli ad di OpenAI e Google Deepmind, ci sono anche italiani tra cui l'esperto di tecnologie dell'informazione Luca Simoncini
- Le fake-news diffuse dai pregiudizi, non dai motori di ricerca 2023-05-30Lo indica uno studio condotto su Google
- L'e-commerce in Italia vale 54 miliardi nel 2023 2023-05-30Fondazione sostenibilità digitale: "Acquisti in aumento del 13%"
- OpenAI, fondo da 1 milione di dollari per regolamentare l'IA 2023-05-30Lo sviluppatore di ChatGpt sovvenziona ricercatori e aziende
- Apple risarcirà proprietari di MacBook per le tastiere difettose 2023-05-30Giudice Usa ha dato via libera all'intesa da 50 milioni di dollari