There are times that you are going to want to add some imagery to your site. This would normally mean using many different image files which will increase the load time for your site. What if you could use a single image and display portions of that image throughout your site.

You could use use a single image called a sprite sheet. This single image file can hold many different images in different tiles for use through out your website. This allows you to load a single file to your page and adjust the viewport in different locations throughtout your site to display the images or icons you are using. Many major websites use this technique.

Let’s use an image like the following:

The size of this image is 220px x 110px. Each tile of the grid is then a 110px x 110px image. So we need to allow for a viewport to this image that is the size of the tile.

The method we are going to use is a simple div element with the class of “sprite”.

<div class="sprite >
</div>

The CSS for this element will use height and width to define the size of the div. You could also create a placeholder image of the size you want your image to be that is a transparent png and place that inside the div, but that is not necessary.

This snippet is the CSS that we require to show the first image with the smiley face in the div. We specify a height and width for the div to create a viewport into a segment of the image. Next set the background of the div to the image url. The last step is to make sure that the image does not repeat.

.sprite {
width: 110px;
height: 110px;
background: url("http://etechtips.com/wp-content/uploads/2017/04/smiley_sad.png");
background-repeat: no-repeat;
}

In order to display the next image in the sequence you need to use the position properties of the background property. Using the hover pseudo class will allow us to demonstrate the change image update. In the hover property we only need to override the background property with a position offset of -110px in the x direction. Notice that we have used a negative to move the image to the left. The origin of this image is considered 0,0.

.sprite:hover {
  background: url("http://etechtips.com/wp-content/uploads/2017/04/smiley_sad.png") -110px 0;
}

If you used a larger image with more tiles you could scale in both horizontal and vertical directions to show more images.

Example:

If the example doesn’t show in the article, either visit the single page post or checkout this codepen: Smiley Sample

Due to a minor adjustment, I used an offset of -109px for this image or I got a slight shift of the image when I hovered. You should only see the shift of smile to frown when you mouse over the image.

The tiles can be uniformly the same size or you could try packing in many images of different sizes and shapes. Just make sure that you allow for the viewport to not display overlapping images.

These are the individual background properties in CSS.

background-color
background-image
background-repeat
background-attachement
background-position

The background-color property specifies the color of the element. This can be useful to specify if someone has turned images off and you want a non-default view of your content. You can use a hex value (#RRGGBB), a shortcut hex value (#RGB) or a named color (red, green,blue).

background-color: #fffffff;

The background-image specifies an image to place in the background of an element. Remember that the image should be supported by as many browsers as possible. This means using jpeg, pngs or gifs, not tifs or proprietary image formats.

background-image: url(images/someimage.gif)

The background-repeat property specifies how an image should display within an element. You can have it repeat across (repeat-x), repeat downwards (repeat-y) or not repeat (no-repeat).

background-repeat: repeat-x;

The background-attachmemnt attribute is used to specify if an image should scroll (scroll) with the page, be fixed (fixed) to the page or inherit position from a parent element (inherit).

background-attachment: fixed;

The background-position attribute is used to specify the starting position of an image. This can be useful if you are using a sprite to speed up loading times. The background-position attribute can take a Xpx Ypx argument, an X% Y% argument, named arguments(left top, right bottom,…) or inherit from the parent.

background-position: 50% 50%;

Here is an example of the use of these:

 body {
   background-color: #ffffff;
   background-image: url(images/someimage.gif);
   background-repeat: no-repeat;
   background-attachment: fixed ;
   background-position: left top ;
}

You can also use a short cut method to the background property.

 .imagebox {
  background: #ffffff url(images/someimage.gif) no-repeat fixed right top;
}

This is the correct order to place the styles in your Cascading Style Sheet(CSS) markup to style links.
The order does matter as out of order markup can lead to lost properties.

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}

There are two ways to include an external stylesheet.  Using a <link> tag in the <head> section of your web page or using the @import tag in a <style> section.  The @import tag can also be placed inside a CSS file to include other CSS files.

Example of an externally linked stylesheet named anyname.css

<head>

<link rel="stylesheet" type="text/css" name="anyname.css" href="url" media="all">

</head>

The name field is the filename and can be set to any path that is available to your Web Server. The media type can be specified in the link tag.

An example of a @import statement to include a CSS file:

<style>

@import('anyfile.css');

</style>

You can also specify the type of stylesheet with the @import statement:

@import('anyfile') screen;

@import('anyfile') print;

The @import statement is not understood by many older browsers, Netscape 4 ignores them completely and Internet Explorer 4 requires you to use parenthesis, even though they are optional.  Luckily, there should be very few people still using these browsers and this is a useful technique to not include features that would not work in those browsers.

The @import directives must be the first items in your CSS. Even comments should not appear before these statements.

Internet Explorer versions 4-7 have the limitation that they do not like specifying the type on the @import line.  I have not researched if this is the case with versions 8 and above.

In order to use an internal stylesheet, place the following in the <head> section of your html document.

<style type="text/css" media="all">

<!--

Place your css here

-->

</style>

The <!– –> (xml style comment) is so that older browsers, though very unlikely, will not get confused by the CSS code within the page.

The media=”all” entry tells the rendering engine which style sheets to use, in this case “all” means to use it for all rendering engines.