Agron Merseli

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.

Leave a comment

%d bloggers like this: