<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/css.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
	<!-- InstanceBeginEditable name="doctitle" -->
    <title>How to Create and Use CSS Image Sprites - Tutorial Republic</title>
    <meta name="description" content="CSS sprite is very effective technique for reducing HTTP requests and improving the loading time and performance of any web pages." />
    <!-- InstanceEndEditable -->
    	<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="fb:admins" content="100001054961582" />
<meta property="fb:app_id" content="1404574483159557" />
<meta property="og:image" content="/lib/images/signature.png" />
<link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
<style>
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html,body{min-height:100%}
p{margin:0 0 12px}
ol,ul{margin:0 0 12px}
a,a:active,a:visited{outline:none;color:#1db79f;text-decoration:none}
a img{border:none;outline:none}
p code,table td:last-child code,.content ul li code,code.mark{padding:2px 4px;color:#333;background-color:#f1f1f1;border-radius:4px}
a code{color:inherit;background:none;padding:0}
table{border-collapse:collapse;border-spacing:0}
table td{vertical-align:top}
body{min-width:1300px;color:#414141;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;font-size:17px;line-height:1.7}
input,select,textarea,button,div,span,a{box-sizing:border-box}
h1,h2,h3,h4{color:#262626;margin:20px 0 10px;line-height:1.5;font-weight:600}
h1{font-size:34px;margin-top:17px}
h2{font-size:28px}
h3{font-size:22px}
.space{margin-bottom:25px!important}
.break{margin-bottom:15px!important}
.text-center{text-align:center!important}
.scroll{height:195px;overflow-y:scroll}
.scroll.large{height:245px}
.scroll.xlarge{height:290px}
.scroll.xxlarge{height:340px}
sup{font-size:13px}
h1 sup{background:#ec0000;border-radius:3px;padding:5px 10px;font-size:15px;color:#fff;position:relative;top:5px}
.leaderboard{padding-top:14px;position:relative;height:105px;overflow:hidden}
.intro-image img{display:block;padding:10px 0 25px;max-width:100%}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
code,.code,.syntax,.green-box,.sky-box,.gray-box,.pink-box,.red-box,.at-rule,.codebox pre,.console-output,.command{font-size:16px;font-family:Consolas,Monaco,Courier,monospace}
.console-output{margin:15px 0}
.command{background:#f2f2f2;padding:16px 18px;margin:15px 0 25px;border-radius:3px}
hr{border:none;border-bottom:1px solid #e7e9ed;height:1px;margin:30px 0}
.summary,.topic{border:1px solid #eaeaea;border-width:1px 0;margin:20px 0;padding:10px 0;color:#8e9aa6;line-height:1.5}
h2.section-title span{display:inline-block;border-bottom:4px solid #c9d7e0;padding:0 50px 12px 0}
.wrapper{width:1300px;padding:0 15px;margin:0 auto}
.header{background:#23384e;padding:16px 0}
input.search{background:#fff;border:0 none;color:#807E7E;float:left;height:38px;line-height:26px;font-size:14px;margin:0 0 0 12px;outline:medium none;padding:6px 14px;width:500px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,0.6);font-family:inherit}
.search-btn{color:rgba(0,0,0,.6);background:#ebebeb;border:none;outline:none;cursor:pointer;float:left;height:38px;line-height:46px;width:44px;display:block;margin-left:-2px;border-radius:0 2px 2px 0;box-shadow:0 0 1px rgba(0,0,0,0.7)}
.logo{width:304px}
.logo img{height:44px;margin:-3px 0;display:block}
.site-search{float:left;margin-left:100px}
.menu{background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.15);position:relative;z-index:9}
.menu a{color:#666;display:inline-block;padding:0 10px;text-decoration:none;font-size:14px;font-weight:600;height:48px;line-height:48px}
.menu a:first-child{margin-left:-10px}
.menu a.tool-link{float:right;display:block;border-radius:30px;line-height:28px;position:relative;height:auto;top:9px;padding:0 12px;color:#1ebba3;border:1px double #1ebba3}
.fl,.logo{float:left}
.leftcolumn{width:240px;float:left;font-size:16px;color:#4f4f4f}
.centercolumn{width:850px;float:left}
.rightcolumn{width:180px;float:left}
.content{background:#fff;padding:15px 40px 20px;border:1px solid #dedede;border-top:none;border-radius:1px}
.sidebar{width:160px;float:left;padding-top:28px;margin-left:20px;position:relative}
.leftcolumn .segment{margin:16px 0 12px;position:relative;font-size:18px;font-weight:600;line-height:normal}
.leftcolumn a{color:#4f4f4f;font-size:16px;line-height:26px;display:block;border-bottom:1px solid transparent}
.leftcolumn ul{list-style:none;padding:0;margin:0}
.segment,.chapters,.chapters a{float:left;clear:both}
h1 code,h2 code,h3 code{font:inherit}
.color-box{margin:15px 0;padding-left:20px}
.note-box,.warning-box,.tip-box{padding:8px 8px 3px 26px}
.info-tab{float:left;margin-left:-23px}
.content ul li{margin-top:7px}
.extra{padding-top:5px}
.green-box,.sky-box,.gray-box,.red-box,.pink-box{color:#000;margin-top:15px;padding:10px;background-color:#f6f8fa;border:1px solid #d7e2ec}
.example{background:#f4f5f6;padding:3px;margin:15px 0}
.codebox{background:#fff;border:1px solid #ddd}
.codebox-title{height:41px;padding-left:12px;border-bottom:1px solid #ddd;background:#f5f5f5}
.codebox-title h4{margin:0;font-size:18px;line-height:40px;float:left;font-weight:600}
a.try-btn,a.download-btn{width:140px;height:40px;color:#333;font-size:15px;line-height:41px;font-weight:600;text-align:center;text-decoration:none;float:right;display:block;border-left:1px solid #ddd;background:rgba(27,31,35,0.08);box-sizing:border-box;font-family:Arial,sans-serif}
a.try-btn span{font-size:18px;line-height:normal}
.hide,.code-style,.box-size,.bottom-link,.footer,.code-style,.snippets,.report-error,.badge,.social,.ad-label,.mobile-only,ul.tree-menu li ul{display:none}
.skyscraper{width:160px;height:600px;overflow:hidden;margin-bottom:20px;background:#ebecf0}
.bottom-ad{margin-top:46px;padding:24px;position:relative;background:url(../lib/images/smooth-line.png) no-repeat center #f9f9f9}
.rectangle-left,.rectangle-right{min-width:336px;min-height:280px;overflow:hidden}
.fr,a.previous-page,a.next-page,.rectangle-right,.topic-nav{float:right}
a.previous-page,a.next-page{width:32px;height:32px;line-height:30px}
.shadow{background:#F7F8F9;padding:3px;margin:10px 0}
.syntax{color:#2f4959;padding:13px 18px;background:#F9F9FA;border:1px solid #ddd;font-size:15px}
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}
pre[class*="language-"]{position:relative;margin:.5em 0;overflow:visible;padding:0}
pre[class*="language-"]>code{position:relative;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}
code[class*="language"]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);display:inline;white-space:normal}
pre[class*="language-"].line-numbers{padding-left:0}
pre[class*="language-"].line-numbers code{padding-left:3.8em}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0}
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}
pre[data-line] code{position:relative;padding-left:4em}
pre .line-highlight{margin-top:0}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;white-space:pre-wrap!important}
pre.line-numbers > code{position:relative;white-space:inherit}
.line-numbers-rows,.codebox pre.inactive{display:none}
.codebox pre.syntax-highlighter{margin:0;padding:0;overflow:auto}
pre.line-numbers .line-numbers-rows{border-right:3px solid #6CE26C}
.codebox pre.syntax-highlighter > code{box-shadow:none!important;padding-left:3.8em;background-image:linear-gradient(transparent 50%,#F8F8F8 50%);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;font-size:16px;line-height:1.5;overflow-wrap:break-word}
.codebox pre.syntax-highlighter,.codebox pre.syntax-highlighter code{border:none;width:100%;box-sizing:border-box}
pre.line-numbers code,pre.line-numbers .line-numbers-rows{padding-top:2px;padding-bottom:2px}
.preview-box{padding:15px;text-align:center;cursor:pointer;overflow:hidden;background:#FFF;border:1px solid #e6e6e6}
.preview-box a,.preview-box img{display:block;margin:0 auto}
.download-box{text-align:center;padding:20px 0;margin:20px 0 10px}
.output-box{border-color:#d4d4d4;border-style:solid;border-width:1px 0;padding:5px 15px;overflow:hidden;background:#fff;margin:10px 0}
.demo-box{margin-top:15px}
.subhead{border-bottom:3px solid #DCE3EB;margin-bottom:15px;padding-bottom:10px}
table.data,table.description{width:100%;font-size:92%}
table.data th{color:#000;padding:8px 7px;text-align:left;font-size:15px;background:#F8F8F8}
table.data td{color:#484848;padding:5px 7px;background:#fff}
table.data th,table.data td{vertical-align:top;border:1px solid #DCE3EB}
table.data tr.section th,table.data td.section{font-size:15px;background:#f0f4f7}
table.description th{width:150px}
table.no-wrap tr td:first-child{white-space:nowrap}
.topic-nav{padding-right:5px;color:#d0d0d0}
.topic-nav a{padding:0 15px;margin:0 0 0 5px;position:relative;display:inline-block}
.topic-nav a::after{font-size:24px;position:absolute;line-height:22px}
.topic-nav a:first-child{margin:0 5px 0 0}
.topic-nav a:first-child::after{content:'\00AB';left:-5px}
.topic-nav a:last-child::after{content:'\00BB';right:-5px}
@media screen and (max-width: 1280px) {
body{min-width:1260px}
.wrapper{width:1260px}
.leftcolumn{width:230px}
.centercolumn{width:820px}
.preview-box img{max-width:100%;height:auto}
}
@media screen and (max-width: 800px) {
body{min-width:100%;max-width:100%;padding-top:46px}
.wrapper{width:100%;padding:0}
.header{height:46px;padding:5px 0;position:fixed;top:0;left:0;right:0;width:100%;z-index:99}
.logo{width:auto;display:block;padding:6px 0 0 60px;position:absolute;left:0;z-index:100}
.logo img{height:30px}
.menu{width:100%;padding-left:12px;padding-right:12px;overflow-x:auto;white-space:nowrap}
.centercolumn{width:100%;float:none}
.content{padding:10px;border-width:0 0 1px 0}
.content img{max-width:100%;height:auto}
.skyscraper{display:inline-block}
.shadow,.example,.console-output,.content pre{max-width:100%;overflow-x:auto}
.codebox-title{position:relative}
.codebox.multi-style-mode pre{padding-top:7px;margin-top:36px;border-top:1px solid #ddd}
.bottom-ad{height:auto;background:none;padding:30px 0 0;margin:40px 0 0;text-align:center;position:relative}
.rectangle-left,.rectangle-right{float:none;display:inline-block;margin:10px auto;background:#EDEEF2}
.leftcolumn,.footer,.social,.site-search,.code-style,.menu a.tool-link,.backdrop{display:none}
.summary,.topic{padding:5px 0;margin:10px 0}
.leftcolumn,.centercolumn,.rightcolumn,.sidebar{float:none}
.header,.menu,.centercolumn,.footer,.appeal-text{width:100%}
a.try-btn,a.download-btn{width:130px}
.native-unit{margin-bottom:30px}
.rightcolumn,.sidebar{margin: 25px auto 0}
.overview{padding-right:0}
.scroll-pane{overflow-x:auto}
table.data{min-width:480px}
table.data pre{display:inline;white-space:normal}
table tr th,table tr td{width:auto!important}
.preview-box{padding:6px}
.leaderboard{margin:20px 0}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
.codebox pre.syntax-highlighter{overflow-x:auto}
.codebox pre.syntax-highlighter > code{min-width:614px;height:auto;overflow-x:hidden}
}
@media screen and (min-width: 801px) {
.site-search,.leftcolumn,.social{display:block!important}
.backdrop{display:none!important}
.hide-scroll{overflow-x:hidden!important}
}
.menu a.old-version{height:21px;font-size:13px;line-height:17px;border:1px double;border-radius:40px;margin-right:10px}</style>
<script>
    (function(){
        var bsa_optimize=document.createElement('script');
        bsa_optimize.type='text/javascript';
        bsa_optimize.async=true;
        bsa_optimize.src='https://cdn4.buysellads.net/pub/tutorialrepublic.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
    })();
</script>
    
    <!-- InstanceBeginEditable name="head" -->
<style>
table.sprite-demo{width:500px;margin:20px auto 35px}
table.sprite-demo td.normal-menu,table.sprite-demo td.sprite-menu{width:30%}
.sprite-menu ul{list-style:none}
.sprite-menu ul li{padding:5px;width:200px;font-size:16px;font-family:CuprumFFU,"Trebuchet MS",Arial,sans-serif;background-image:none}
.sprite-menu ul li a{height:50px;line-height:50px;display:inline-block;padding-left:60px;color:#3e789f;background:url(../lib/images/mySprite.png) no-repeat}
.sprite-menu ul li a:hover{color:#333}
.sprite-menu ul li.firefox a{background-position:0 0}
.sprite-menu ul li.chrome a{background-position:0 -100px}
.sprite-menu ul li.ie a{background-position:0 -200px}
.sprite-menu ul li.safari a{background-position:0 -300px}
.sprite-menu ul li.opera a{background-position:0 -400px}
.sprite-menu ul li.firefox a:hover{background-position:0 -50px}
.sprite-menu ul li.chrome a:hover{background-position:0 -150px}
.sprite-menu ul li.ie a:hover{background-position:0 -250px}
.sprite-menu ul li.safari a:hover{background-position:0 -350px}
.sprite-menu ul li.opera a:hover{background-position:0 -450px}
.normal-menu ul li{list-style:none;padding:5px;width:200px;background-image:none}
.normal-menu ul li a{height:50px;line-height:50px;display:inline-block;font-family:CuprumFFU,"Trebuchet MS",Arial,sans-serif;font-size:16px;color:#3e789f;padding-left:60px}
.normal-menu ul li a:hover{color:#333}
.normal-menu ul li.firefox a{background:url(../lib/images/mySprite/firefox.png) no-repeat}
.normal-menu ul li.chrome a{background:url(../lib/images/mySprite/chrome.png) no-repeat}
.normal-menu ul li.ie a{background:url(../lib/images/mySprite/ie.png) no-repeat}
.normal-menu ul li.safari a{background:url(../lib/images/mySprite/safari.png) no-repeat}
.normal-menu ul li.opera a{background:url(../lib/images/mySprite/opera.png) no-repeat}
.normal-menu ul li.firefox a:hover{background:url(../lib/images/mySprite/firefox-hover.png) no-repeat}
.normal-menu ul li.chrome a:hover{background:url(../lib/images/mySprite/chrome-hover.png) no-repeat}
.normal-menu ul li.ie a:hover{background:url(../lib/images/mySprite/ie-hover.png) no-repeat}
.normal-menu ul li.safari a:hover{background:url(../lib/images/mySprite/safari-hover.png) no-repeat}
.normal-menu ul li.opera a:hover{background:url(../lib/images/mySprite/opera-hover.png) no-repeat}
</style>
    <!-- InstanceEndEditable -->
    
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40117907-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-40117907-1');
</script></head>
<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
    <!--Header-->
    
<div class="header">
    <div class="wrapper clearfix">
        <button type="button" class="open-menu mobile-only"><i class="icon-menu"></i></button>
        <div class="logo">
            <a href="../index.html"><img src="../lib/images/logo.svg" alt="TutorialRepublic" /></a>
        </div>
        <div class="site-search">
            <form inert action="https://www.google.com/search" method="get" target="_blank" class="clearfix">
                <input type="hidden" value="www.tutorialrepublic.com" name="sitesearch"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <input type="text" name="q" placeholder="disabled" id="searchInput" class="search"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <button type="submit" class="search-btn"><span class="icon-search"></span></button>
            </form>
        </div>
        <div class="social">                
            <a href="https://www.facebook.com/tutorialrepublic" target="_blank" title="Join us on Facebook"><i class="icon-facebook"></i></a>
            <a href="https://twitter.com/tutrepublic" target="_blank" title="Follow us on Twitter"><i class="icon-twitter"></i></a>
            <a href="../contact-us.php.html" target="_blank" title="Send us an Email"><i class="icon-mail"></i></a>
        </div>
        <button type="button" class="open-search mobile-only">
            <i class="icon-search"></i>
        </button>
    </div>    
</div>
<div class="menu">
    <div class="wrapper">
        <a href="../index.html" title="Home Page">HOME</a>
        <a href="../html-tutorial/html-introduction.php.html" title="HTML Tutorial">HTML5</a>            
        <a href="index.html" title="CSS Tutorial">CSS3</a>
        <a href="../javascript-tutorial/index.html" title="JavaScript Tutorial">JAVASCRIPT</a>
        <a href="../jquery-tutorial/index.html" title="jQuery Tutorial">JQUERY</a>
        <a href="../twitter-bootstrap-tutorial/index.html" title="Bootstrap 5 Tutorial">BOOTSTRAP5</a>
		<a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/" class="old-version" title="Bootstrap 4.6 Tutorial">v4.6</a>
        <a href="../php-tutorial/index.html" title="PHP Tutorial">PHP7</a> 
        <a href="../sql-tutorial/index.html" title="SQL Tutorial">SQL</a>
        <a href="../references.php.html" title="Web References">REFERENCES</a>
        <a href="../practice-examples.php.html" title="Practice Examples and Demos">EXAMPLES</a>
        <a href="../faq.php.html" title="Frequently Asked Questions and Answers">FAQ</a>
        <a href="../snippets/gallery.php.html" title="Bootstrap Code Snippets" target="_blank">SNIPPETS</a>
        <a href="../codelab.php.html" class="tool-link" target="_blank">Online HTML Editor</a>
    </div>        
</div>    <!--End:Header-->
    <div class="wrapper clearfix">
        <div class="leftcolumn" id="myNav">
		
        <div class="segment"><span>CSS</span> BASIC</div>
<div class="chapters">
    <a href="index.html">CSS Introduction</a>
	<a href="css-get-started.php.html">CSS Getting Started</a>
    <a href="css-syntax.php.html">CSS Syntax</a>
    <a href="css-selectors.php.html">CSS Selectors</a>
    <a href="css-color.php.html">CSS Color</a> 
    <a href="css-background.php.html">CSS Background</a>
    <a href="css-fonts.php.html">CSS Fonts</a>
    <a href="css-text.php.html">CSS Text</a>
    <a href="css-links.php.html">CSS Links</a>
    <a href="css-lists.php.html">CSS Lists</a>
    <a href="css-tables.php.html">CSS Tables</a>
</div>
<div class="segment"><span>CSS</span> BOX MODEL</div>
<div class="chapters">
    <a href="css-box-model.php.html">CSS Box Model</a>
    <a href="css-dimension.php.html">CSS Dimension</a>    
    <a href="css-padding.php.html">CSS Padding</a>
    <a href="css-border.php.html">CSS Border</a>
    <a href="css-margin.php.html">CSS Margin</a>
</div>
<div class="segment"><span>CSS</span> ADVANCED</div>
<div class="chapters">
    <a href="css-outline.php.html">CSS Outline</a>
    <a href="css-cursors.php.html">CSS Cursors</a>
    <a href="css-overflow.php.html">CSS Overflow</a>    
    <a href="css-units.php.html">CSS Units</a>
    <a href="css-visual-formatting.php.html">CSS Visual Formatting</a>
    <a href="css-display.php.html">CSS Display</a>
    <a href="css-visibility.php.html">CSS Visibility</a>
    <a href="css-position.php.html">CSS Position</a>
    <a href="css-layers.php.html">CSS Layers</a>
    <a href="css-float.php.html">CSS Float</a>
    <a href="css-alignment.php.html">CSS Alignment</a>
    <a href="css-pseudo-classes.php.html">CSS Pseudo-classes</a>
    <a href="css-pseudo-elements.php.html">CSS Pseudo-elements</a>
    <a href="css-media-types.php.html">CSS Media Types</a>
    <a href="css-sprites.php.html">CSS Sprites</a>
    <a href="css-opacity.php.html">CSS Opacity</a>
    <a href="css-attribute-selectors.php.html">CSS Attribute Selectors</a>
    <a href="css-validation.php.html">CSS Validation</a>
</div>
<div class="segment"><span>CSS3</span> FEATURES</div>
<div class="chapters">
    <a href="css3-border.php.html">CSS3 Border</a>
	<a href="css3-color.php.html">CSS3 Color</a>
    <a href="css3-background.php.html">CSS3 Background</a>
    <a href="css3-gradients.php.html">CSS3 Gradients</a>
	<a href="css3-text-overflow.php.html">CSS3 Text Overflow</a>
    <a href="css3-drop-shadows.php.html">CSS3 Drop Shadows</a>
    <a href="css3-2d-transforms.php.html">CSS3 2D Transforms</a>
    <a href="css3-3d-transforms.php.html">CSS3 3D Transforms</a>
    <a href="css3-transitions.php.html">CSS3 Transitions</a>
    <a href="css3-animations.php.html">CSS3 Animations</a>
    <a href="css3-multi-column-layouts.php.html">CSS3 Multi-Column Layouts</a>
	<a href="css3-box-sizing.php.html">CSS3 Box Sizing</a>
	<a href="css3-flexible-box-layouts.php.html">CSS3 Flexbox</a>
	<a href="css3-filters.php.html">CSS3 Filters</a>
	<a href="css3-media-queries.php.html">CSS3 Media Queries</a>
	<a href="css3-miscellaneous.php.html">CSS3 Miscellaneous</a>
</div>
<div class="segment"><span>CSS3</span> EXAMPLES</div>
<div class="chapters">
    <a href="../css-examples.php.html">CSS3 Practice Examples</a>
	<a href="../faq.php.html#html-css">CSS3 FAQ's Answers</a>
</div>
<div class="segment"><span>CSS3</span> REFERENCE</div>
<div class="chapters">
    <a href="../css-reference/css-at-rules.php.html">CSS3 At-rules</a>
    <a href="../css-reference/css3-properties.php.html">CSS3 Properties</a>
	<a href="../css-reference/css-animatable-properties.php.html">CSS3 Animatable Properties</a>
    <a href="../css-reference/css-color-values.php.html">CSS3 Color Values</a>
    <a href="../css-reference/css-color-names.php.html">CSS3 Color Names</a>
    <a href="../css-reference/css-web-safe-fonts.php.html">CSS3 Web Safe Fonts</a>
    <a href="../css-reference/css-aural-properties.php.html">CSS3 Aural Properties</a>
	<a href="../references.php.html" class="more">More references</a>
</div>        
                </div>
        <div class="centercolumn">
            <!--Text Content-->
            <div class="content">
                <div class="leaderboard">

    <div class="ad-label">Advertisements</div>

    <div class="ad-container">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Responsive Leaderboard -->
        <ins class="adsbygoogle"
                style="display:block;max-width:728px;width:100%;height:90px"
                data-ad-client="ca-pub-9107540490929984"
                data-ad-slot="4302666817"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <!-- ABR Leaderboard -->
    <div id="bsa-zone_1579648332258-0_123456"></div>

</div>                <!-- InstanceBeginEditable name="main_content" -->
                <a href="css-media-types.php.html" class="previous-page" title="Go to Previous Page"></a>
                <a href="css-opacity.php.html" class="next-page" title="Go to Next Page"></a>
                <h1>CSS <span>Sprites</span></h1>
                <p class="summary">CSS sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file.</p>
                <h2>What is a Sprite</h2>
                <p>Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.</p>
                <p class="space">To display a single image from the combined image, you could use the CSS <a href="../css-reference/css-background-position-property.php.html"><code>background-position</code></a> property, defining the exact position of the image to be displayed.</p>
                <h2>Advantage of Using CSS Image Sprite</h2>
                <p>A web page with many images, particularly many small images, such as icons, buttons, etc. can take a long time to load and generates multiple server requests.</p>
                <p>Using the image sprites instead of separate images will significantly reduce the number of HTTP requests a browser makes to the server, which can be very effective for improving the loading time of web pages and overall site performance.</p>
                <div class="color-box break">
                    <div class="shadow">
                        <div class="info-tab note-icon" title="Important Notes"><i></i></div>
                        <div class="note-box">
                            <p><strong>Note:</strong> Reducing the number of HTTP requests has the major impact on reducing response time that makes the web page more responsive for the user.</p>
                        </div>
                    </div>
                </div>
                <p>Checkout the following examples and you will see one visible difference; when you place the mouse pointer over the browser icons in non-sprite version for the first time the hover image will appear after some time, it happens because the hover image is loaded from the server on mouse hover, since the normal and hover images are two different images.</p>
                <p>Whereas in sprite version, since all images are combined in a single image the hover image is displayed immediately on mouse hover that results in smooth hover effect.</p>
                <table class="sprite-demo space">
                    <tr>
                        <td class="normal-menu">
                            <ul>
                                <li class="firefox"><a href="javascript:void(0);">Firefox</a></li>
                                <li class="chrome"><a href="javascript:void(0);">Chrome</a></li>
                                <li class="ie"><a href="javascript:void(0);">Explorer</a></li>
                                <li class="safari"><a href="javascript:void(0);">Safari</a></li>
                                <li class="opera"><a href="javascript:void(0);">Opera</a></li>
                            </ul>
                        </td>
                        <td id="example-a"><img src="../lib/images/example-A.gif" alt="Example A" /></td>
                    </tr>
                </table>
                <table class="sprite-demo">
                    <tr>
                        <td class="sprite-menu">
                            <ul>
                                <li class="firefox"><a href="javascript:void(0);">Firefox</a></li>
                                <li class="chrome"><a href="javascript:void(0);">Chrome</a></li>
                                <li class="ie"><a href="javascript:void(0);">Explorer</a></li>
                                <li class="safari"><a href="javascript:void(0);">Safari</a></li>
                                <li class="opera"><a href="javascript:void(0);">Opera</a></li>
                            </ul>
                        </td>
                        <td id="example-b"><img src="../lib/images/example-B.gif" alt="Example B" /></td>
                    </tr>
                </table>
                <p>Using CSS sprite technique demonstrated in the: [<a href="css-sprites.php.html#example-b">EXAMPLE - B</a>]; we were able to reduce the number of HTTP requests by 9 and the total file size of the image(s) by 38.2 KB as compared to the [<a href="css-sprites.php.html#example-a">EXAMPLE - A</a>];. That's a pretty huge improvement for such a small example. Imagine what you could do on a complete website.</p>
                <p>The whole process of creating this example is explained below.</p>
                <hr />
                <h2>Making the Image Sprite</h2>
                <p>We made this sprite image by combining 10 separate images in a single image (<a href="../lib/images/mySprite.png" target="_blank">mySprite.png</a>).  You can create your own sprite using any image editing tool you like. </p>
                <div class="space"><img src="../lib/images/image-sprite-illustration.jpg" width="600" height="650" alt="Sprite Image Illustration" /></div>
                <div class="color-box space">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> For the sake of simplicity, we have used all icons of same size, and place them closely to each other for easy offset calculation.</p>
                        </div>
                    </div>
                </div>
                <hr />
                <h2>Display an Icon from Image Sprite</h2>
                <p>Finally, utilizing CSS, we can display just the part of an image sprite we need.</p>
                <p>First of all, we will create the class <code>.sprite</code> that will load our sprite image. This is to avoid repetition, because all items share the same background-image.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=display-individual-icon-from-image-sprite.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">.sprite {
    background: url("images/mySprite.png") no-repeat;
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>Now, we must define a class for each item we want to display. For example, to display Internet Explorer icon form the image sprite the CSS code would be.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=display-individual-icon-from-image-sprite.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>Now the question arises, how did we get those pixel values for <a href="../css-reference/css-background-position-property.php.html"><code>background-position</code></a>? Let's find out. The first value is the <em>horizontal position</em>, and second is the <em>vertical position</em> of background. As the upper-left corner of Internet Explorer icon touches the left edge so its horizontal distance from the starting point i.e. top-left corner of the image sprite is <b>0</b>, and since it is placed on the <i>5th position</i> so its vertical distance from the starting point of image sprite is <code>4 X 50px = 200px</code>, because height of each icon is <b>50px</b>.</p>
                <p>To show the Internet Explorer icon we have to move its upper-left corner to the starting point i.e. top-left corner of image sprite (mySprite.png). Also, since this icon is placed at the vertical distance of <b>200px</b>, we will need to shift the whole background-image (mySprite.png) vertically up by <b>200px</b>, which requires us to apply the value as a negative number that is <b>-200px</b>, because the negative value makes it go vertically up whereas a positive value would move it down. However, it doesn't require a horizontal offset, since there are no pixels before the upper-left corner of the Internet Explorer icon.</p>
                <div class="color-box space">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> Just play around with the value of <a href="../css-reference/css-background-position-property.php.html"><code>background-position</code></a> property in the upcoming examples and you will quickly learn how the offsets work.</p>
                        </div>
                    </div>
                </div>
                <hr />
                <h2>Creating a Navigation Menu Using CSS Image Sprite</h2>
                <p>In the previous section we have learned, how to display an individual icon from an image sprite. This is the easiest way to use image sprites, now we are going one step ahead by building a navigation menu with <em>rollover effect</em> as demonstrated in [<a href="css-sprites.php.html#example-b">EXAMPLE - B</a>].</p>
                <p class="space">Here we will use the same sprite image (<a href="../lib/images/mySprite.png" target="_blank">mySprite.png</a>) to create our navigation menu.</p>
                <h2>Foundation HTML for Navigation</h2>
                <p>We will start by creating our navigation menu with an HTML <a href="../html-tutorial/html-lists.php.html#unordered-lists">unordered list</a>.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=sprite-menu-markup.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;ul class="menu"&gt;
    &lt;li class="firefox"&gt;&lt;a href="#"&gt;Firefox&lt;/a&gt;&lt;/li&gt;
    &lt;li class="chrome"&gt;&lt;a href="#"&gt;Chrome&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ie"&gt;&lt;a href="#"&gt;Explorer&lt;/a&gt;&lt;/li&gt;
    &lt;li class="opera"&gt;&lt;a href="#"&gt;Opera&lt;/a&gt;&lt;/li&gt;
    &lt;li class="safari"&gt;&lt;a href="#"&gt;Safari&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <h2>Applying the CSS on Navigation</h2>
                <p>The following sections will describes you how to convert the simple unordered list given in example above to a spite image based navigation using the CSS.</p>
                <h3>Step 1: Resetting the List Structure</h3>
                <p>By default, HTML <a href="../html-tutorial/html-lists.php.html#unordered-lists">unordered lists</a> are displayed with bullets. We'll need to remove the default bullets by setting the <a href="../css-reference/css-list-style-type-property.php.html"><code>list-style-type</code></a> attribute to <code>none</code>.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=resetting-menu-list-structure.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">ul.menu {
    list-style-type: none;
}
ul.menu li {
    padding: 5px;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <h3>Step 2: Setting Common Properties for Each Links</h3>
                <p>In this step we will set all the common CSS properties that all links are going to share. Such as, <a href="../css-reference/css-color-property.php.html"><code>color</code></a>, <a href="../css-reference/css-background-image-property.php.html"><code>background-image</code></a>, <a href="../css-reference/css-display-property.php.html"><code>display</code></a>, <a href="../css-reference/css-padding-property.php.html"><code>padding</code></a>, etc.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=setting-common-links-properties.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* To sift text off the background-image */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <h3>Step 3: Setting Default State of Each Links</h3>
                <p>Now, we must define a class for each menu item, because every item in the image sprite has different <a href="../css-reference/css-background-position-property.php.html"><code>background-position</code></a>. For example, Firefox icon is placed at the starting point i.e. top-left corner of the image sprite, so there is no need to shift the background-image. Hence the vertical and horizontal position of the background in this case would be 0. Similarly, you can define background-position for other icons within the image sprite.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=setting-default-state-for-menu-links.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">ul.menu li.firefox a {
    background-position: 0 0;
}
ul.menu li.chrome a {
    background-position: 0 -100px;
}
ul.menu li.ie a {
    background-position: 0 -200px;
}
ul.menu li.safari a {
    background-position: 0 -300px;
}
ul.menu li.opera a {
    background-position: 0 -400px;
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <h3>Step 4: Adding Hover States of Links</h3>
                <p>Adding hover states owns the same principle as adding the above links. Just move their upper-left corner to the starting point (i.e. top-left corner) of the image sprite as we have done above. You can simply calculate the <a href="../css-reference/css-background-position-property.php.html"><code>background-position</code></a> using the following formula:</p>
                <p><code>Vertical position of hover state = Vertical position of normal state - 50px</code></p>
                <p>As rollover images are just below the default state and height of each icon is equal to 50px. The hover state of icons also doesn't require a horizontal offset, since there are no pixels before the upper-left corner of them.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=setting-hover-state-for-menu-links.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-css">ul.menu li.firefox a:hover {
    background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
    background-position: 0 -150px;
}
ul.menu li.ie a:hover {
    background-position: 0 -250px;
}
ul.menu li.safari a:hover {
    background-position: 0 -350px;
}
ul.menu li.opera a:hover {
    background-position: 0 -450px;
}</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p class="break">Done! Here is our final HTML and CSS code after combining the whole process:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=css&amp;file=complete-navigation-menu-based-on-image-sprite.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Example of Sprite Navigation Menu&lt;/title&gt;
&lt;style&gt;
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* To sift text off the background-image */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
    ul.menu li.firefox a:hover {
        background-position: 0 -50px;
    }
    ul.menu li.chrome a:hover {
        background-position: 0 -150px;
    }
    ul.menu li.ie a:hover {
        background-position: 0 -250px;
    }
    ul.menu li.safari a:hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a:hover {
        background-position: 0 -450px;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;ul class="menu"&gt;
        &lt;li class="firefox"&gt;&lt;a href="#"&gt;Firefox&lt;/a&gt;&lt;/li&gt;
        &lt;li class="chrome"&gt;&lt;a href="#"&gt;Chrome&lt;/a&gt;&lt;/li&gt;
        &lt;li class="ie"&gt;&lt;a href="#"&gt;Explorer&lt;/a&gt;&lt;/li&gt;
        &lt;li class="opera"&gt;&lt;a href="#"&gt;Opera&lt;/a&gt;&lt;/li&gt;
        &lt;li class="safari"&gt;&lt;a href="#"&gt;Safari&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <!--Bottom Navigation-->
                <div class="bottom-link clearfix">
                    <a href="css-media-types.php.html" class="previous-page-bottom">Previous Page</a>
                    <a href="css-opacity.php.html" class="next-page-bottom">Next Page</a>
                </div>
                <!--End:Bottom Navigation-->
                <!-- InstanceEndEditable -->
                <div class="bottom-ad clearfix">

     <div class="ad-label">Advertisements</div>

     <!--Rectangle Left-->
     <div class="rectangle-left fl">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Left -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="8162953958"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Left-->

     <!--Rectangle Right-->
     <div class="rectangle-right fr">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Right -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="3324015654"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Right-->

</div>

            </div>
            <!--End:Text Content-->
            <!--Feedback Form-->
			<div class="snippets">
	<a href="../snippets/gallery.php.html" target="_blank"><img src="../lib/images/bootstrap-code-snippets.png" alt="Bootstrap UI Design Templates" /></a>
</div>            <!--End:Feedback Form-->
        </div>        
        <div class="rightcolumn">
            <div class="sidebar">
    
    <div class="ad-label">Advertisements</div>

    <div class="skyscraper primary">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Premium Skyscraper -->
        <ins class="adsbygoogle"
            style="display:inline-block;width:160px;height:600px"
            data-ad-client="ca-pub-9107540490929984"
            data-ad-slot="4376141825"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="skyscraper">
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- Bottom Skyscraper -->
     <ins class="adsbygoogle"
          style="display:inline-block;width:160px;height:600px"
          data-ad-client="ca-pub-9107540490929984"
          data-ad-slot="3387984471"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
</div>
</div>        </div>
    </div>
    <!--Footer-->
	<!--Footer-->
<div class="footer">
    <div class="appeal">
        <div class="wrapper">
            <p>Is this website helpful to you? Please give us a
            <a href="../like.php.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=250,width=600,top=150, left='+((screen.width/2)-300));return false;">like</a>,
            or share your <a href="../contact-us.php.html" target="_blank">feedback</a><em> to help us improve</em>.
            Connect with us on <a href="https://www.facebook.com/tutorialrepublic" target="_blank">Facebook</a> and <a href="https://twitter.com/tutrepublic" target="_blank">Twitter</a> for the latest updates.</p>               
        </div>
    </div>
    <div class="footer-inner">
        <div class="wrapper clearfix">                
            <div class="link-box">
                <h4>About Us</h4>
                <div class="clearfix">
                    <a href="../about-us.php.html">Our Story</a>                    
                    <a href="../terms-of-use.php.html">Terms of Use</a>
                    <a href="../privacy-policy.php.html">Privacy Policy</a>                    
                </div>
            </div>
            <div class="link-box">
                <h4>Contact</h4>
                <div class="clearfix">
                    <a href="../contact-us.php.html">Contact Us</a>                    
                    <a href="../contact-us.php.html" target="_blank">Report Error</a>
                    <a href="../advertise-with-us.php.html">Advertise</a>                    
                </div>
            </div>
            <div class="tool-box">
                <h4>Interactive Tools</h4>
                <div class="tools-list clearfix" id="tools">
                    <a href="../font-awesome-icons-classes.php.html" target="_blank">Font Awesome Icon Search Utility</a>
                    <a href="../html-formatter.php.html" target="_blank">HTML Formatter</a>
                    <a href="../faq/what-is-the-maximum-length-of-title-and-meta-description-tag.php.html">Title &amp; Meta Length Calculator</a>
                    <a href="../html-reference/html-color-picker.php.html">HTML Color Picker</a>
                    <a href="../twitter-bootstrap-button-generator.php.html" target="_blank">Bootstrap Button Generator</a>
                    <a href="../codelab.php%3Ftopic=sql&amp;file=select-all.html" target="_blank">SQL Playground</a>
                    <a href="../bootstrap-icons-classes.php.html" target="_blank">Bootstrap Icon Finder</a>
                    <a href="../codelab.php%3Ftopic=html&amp;file=hello-world.html" target="_blank">HTML Editor</a>
                </div>
            </div>
            <div class="footer-logo">
                <p><img src="../lib/images/logo.svg" alt="TutorialRepublic" /><p>
					<div>
						<a href="https://www.buymeacoffee.com/tutrepublic" class="bmc-btn" rel="nofollow" target="_blank">
    						<img src="../lib/images/bmc-btn.png" alt="BMC" />
						</a>
					</div>
            </div>
        </div>
    </div>           
        <div class="bottom-strip">
        <div class="wrapper">
            <div class="notice">Copyright &copy; 2022 Tutorial Republic. All Rights Reserved.</div>
            <div class="social-media">
                <em>Share This:</em>
                <a href="https://facebook.com/sharer.php?u=https://www.tutorialrepublic.com%2Fcss-tutorial%2Fcss-sprites.php" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Facebook"><i class="icon-facebook"></i></a>
                <a href="css-sprites.php.html#" id="tweet-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Twitter"><i class="icon-twitter"></i></a>
                <a href="css-sprites.php.html#" id="email-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" rel="noreferrer" title="Gmail"><i class="icon-mail"></i></a>
            </div>
        </div>            
    </div>
    <script>
        var title = document.title.replace('- Tutorial Republic', '');
        document.getElementById('tweet-btn').href = 'https://twitter.com/share?text=' + title + '- &url=https://www.tutorialrepublic.com%2Fcss-tutorial%2Fcss-sprites.php';
        document.getElementById('email-btn').href = 'https://mail.google.com/mail/?view=cm&fs=1&su=' + title + '&body=https://www.tutorialrepublic.com%2Fcss-tutorial%2Fcss-sprites.php';
    </script>
</div>
<!--End:Footer-->
    
<div class="backdrop mobile-only"></div>

<!-- TutorialRepublic base script -->
<script>
// Adding CSS files
[	
	'/lib/styles/legacy/extended-1.1.css',
	'/lib/icomoon/style.css'
].forEach(function(href) {
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = href;
	(document.getElementsByTagName('head')[0]).appendChild(link);
});

// Adding JS files
[
	'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
	'/lib/js/prism.js',
	'/lib/js/default-1.3.js'
].forEach(function(src) {
	var script = document.createElement('script');
	script.async = false; // important
	script.src = src;
	(document.getElementsByTagName('body')[0]).appendChild(script);
});
</script>


    <!--End:Footer-->
</body>
<!-- InstanceEnd --></html>