CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS Sprite Generator, Editor, and Code</title> <meta name="description" content="A tool for generating image sprites and CSS for your web site. Using this tool can help you dramatically reduce the number of HTTP requests made for higher performance."> <meta name="keywords" content="css sprites, css, sprites, sprite, tool, generate, http requests, http, request"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <link rel="shortcut icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="ZkllBXM0YaGbvtbUBWPeMrRH7sJOHSKErKPJ_bQA9zM" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="/bootsnipp-layout/bootsnipp.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script async src="//netdna.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <script> window.onload = function() { setTimeout(function() { var ad = document.querySelector("ins.adsbygoogle[data-ad-slot='5700240528']"); var promos = document.querySelectorAll(".az8myt"); for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) { // ad.style.cssText = 'display:block !important'; ad.parentElement.style.cssText = 'display:none !important'; promo.innerHTML = '<center>\ <div class="az8myt2" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h4 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-screenshot"></i> <a href="https://www.bidnapper.com/?refuser=danstools">Win More eBay Auctions</a></h4>\ Bid in the final seconds on eBay. Win more, save money, fast, and free.\ </div>\ </center>'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = '<center>\ <div class="az8myt2" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h5 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-screenshot glyphicon glyphicon-screenshot"></i> <a href="https://www.bidnapper.com/?refuser=danstools">Win More eBay Auctions</a></h5>\ Bid in the final seconds on eBay. Win more, save money, fast, and free.\ </div>\ </center>'; var promotwo = document.querySelector(".az8myt2"); promotwo.style.width= ''; } } }, 1000); }; </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('require', 'GTM-PKH6F4B'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); </script> <script data-ad-client="ca-pub-8815422507798180" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </head> <body> <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a style="padding-top:10px;" class="navbar-brand animate" href="https://spritegen.website-performance.org">CSS Sprite Generator</a> <span class="text-muted" style="font-size:.75em; position:absolute; bottom:3px; left:30px">From <strong>Dan's Tools</strong></span> </div> </div>  <script> $(document).ready(function(){ $('.dropdown-submenu a.submenutest').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu>li>a:hover { background-color: #F5F5F5; border-left-width: 5px; padding-left: 15px; } .dropdown-submenu>.dropdown-menu>li>a { border-left: 0 solid #5FB0E4; color: #787878; font-size: 16px; font-weight: 400; padding: 10px 20px; white-space: nowrap; } .dropdown-submenu .dropdown-menu { min-width: 220px; top: 0; left: 100%; margin-top: -1px; } </style>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Web Dev</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://bootsnipp.com" rel="nofollow">HTML/JS/CSS Playground</a></li><li><a href="http://www.hexcolortool.com" rel="nofollow">HTML Color Codes</a></li><li><a href="http://www.cssfontstack.com" rel="nofollow">CSS Fonts</a></li><li><a href="http://www.cleancss.com/diff-compare-merge" rel="nofollow">Online Diff Tool</a></li><li><a href="http://www.htaccessredirect.net" rel="nofollow">.htaccess Generator</a></li><li><a href="http://www.regextester.com" rel="nofollow">RegEx Testing</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB & HEX Color Explorer</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB to HEX Color Converter</a></li><li><a href="http://www.unixtimestamp.com" rel="nofollow">TimeStamp Converter</a></li><li><a href="http://website-performance.org" rel="nofollow">Website Speed Test</a></li><li><a href="http://www.favicon-generator.org" rel="nofollow">Favicon.ico & App Icon Generator</a></li><li><a href="http://www.favicon-generator.org/image-editor" rel="nofollow">Online Image Editor</a></li><li><a href="http://spritegen.website-performance.org" rel="nofollow">CSS Sprite Generator</a></li><li><a href="http://www.cleancss.com/keyword-tool" rel="nofollow">Keyword Tool</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Conversion</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Data</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/CSV-to-HTML" rel="nofollow">CSV To HTML Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-JSON" rel="nofollow">CSV To JSON Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-TSV" rel="nofollow">CSV To TSV Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-XML" rel="nofollow">CSV To XML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-CSV" rel="nofollow">JSON To CSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-HTML" rel="nofollow">JSON To HTML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-TSV" rel="nofollow">JSON To TSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-XML" rel="nofollow">JSON To XML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-CSV" rel="nofollow">XML To CSV Converter</a></li><li><a href="http://www.cleancss.com/XML-to-HTML" rel="nofollow">XML To HTML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-JSON" rel="nofollow">XML To JSON Converter</a></li><li><a href="http://www.cleancss.com/XML-to-TSV" rel="nofollow">XML To TSV Converter</a></li><li><a href="http://www.files-conversion.com" rel="nofollow">Convert Files</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Numbers</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-converter" rel="nofollow">Binary Converter</a></li><li><a href="http://www.cleancss.com/binary-to-decimal" rel="nofollow">Binary To Decimal Converter</a></li><li><a href="http://www.cleancss.com/binary-to-hex" rel="nofollow">Binary To Hex Converter</a></li><li><a href="http://www.cleancss.com/binary-to-octal" rel="nofollow">Binary To Octal Converter</a></li><li><a href="http://www.cleancss.com/convert-units" rel="nofollow">Unit Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-binary" rel="nofollow">Decimal To Binary Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-hex" rel="nofollow">Decimal To Hex Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-octal" rel="nofollow">Decimal To Octal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-binary" rel="nofollow">Hex To Binary Converter</a></li><li><a href="http://www.cleancss.com/hex-to-decimal" rel="nofollow">Hex To Decimal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-octal" rel="nofollow">Hex To Octal Converter</a></li><li><a href="http://www.cleancss.com/how-many-bytes" rel="nofollow">Data Size Converter</a></li><li><a href="http://www.cleancss.com/octal-to-binary" rel="nofollow">Octal To Binary Converter</a></li><li><a href="http://www.cleancss.com/octal-to-decimal" rel="nofollow">Octal To Decimal Converter</a></li><li><a href="http://www.cleancss.com/octal-to-hex" rel="nofollow">Octal To Hex Converter</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Strings</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-to-string" rel="nofollow">Binary To String Converter</a></li><li><a href="http://www.cleancss.com/hex-to-string" rel="nofollow">Hex To String Converter</a></li><li><a href="http://www.cleancss.com/html-escape" rel="nofollow">HTML Entities Escape</a></li><li><a href="http://www.cleancss.com/html-unescape" rel="nofollow">HTML Entities Unescape</a></li><li><a href="http://www.cleancss.com/string-to-binary" rel="nofollow">String To Binary Converter</a></li><li><a href="http://www.cleancss.com/string-to-hex" rel="nofollow">String To Hex Converter</a></li><li><a href="http://www.cleancss.com/strip-html" rel="nofollow">Strip and Remove HTML Tags</a></li><li><a href="http://www.cleancss.com/strip-xml" rel="nofollow">Strip and Remove XML Tags</a></li><li><a href="http://www.cleancss.com/word-counter" rel="nofollow">Word Counter</a></li><li><a href="http://www.cleancss.com/xml-escape" rel="nofollow">XML Entities Escape</a></li><li><a href="http://www.cleancss.com/xml-unescape" rel="nofollow">XML Entities Unescape</a></li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Encode/Decoders</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/base64-decode" rel="nofollow">Base64 Decode</a></li><li><a href="http://www.cleancss.com/base64-encode" rel="nofollow">Base64 Encode</a></li><li><a href="http://www.md5hashgenerator.com" rel="nofollow">MD5 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha1-generator" rel="nofollow">SHA-1 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha256-hash-generator" rel="nofollow">SHA-256 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha512-hash-generator" rel="nofollow">SHA-512 Hash Generator</a></li><li><a href="http://www.url-encode-decode.com" rel="nofollow">URL Encode/Decode</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Formatters</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/css-beautify" rel="nofollow">CSS Formatter</a></li><li><a href="http://www.cleancss.com/go-beautify" rel="nofollow">GO Formatter</a></li><li><a href="http://www.cleancss.com/html-beautify" rel="nofollow">HTML Beautifier & Formatter</a></li><li><a href="http://www.cleancss.com/javascript-beautify" rel="nofollow">Javascript Formatter</a></li><li><a href="http://www.cleancss.com/javascript-obfuscate" rel="nofollow">Javascript Obfuscate</a></li><li><a href="http://www.cleancss.com/json-beautify" rel="nofollow">JSON Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/json-editor" rel="nofollow">JSON Editor</a></li><li><a href="http://www.cleancss.com/json-validator" rel="nofollow">JSON Validator</a></li><li><a href="http://www.cleancss.com/perl-beautify" rel="nofollow">Perl Formatter</a></li><li><a href="http://www.cleancss.com/php-beautify" rel="nofollow">PHP Formatter</a></li><li><a href="http://www.cleancss.com/python-beautify" rel="nofollow">Python Formatter</a></li><li><a href="http://www.cleancss.com/ruby-beautify" rel="nofollow">Ruby Formatter</a></li><li><a href="http://www.cleancss.com/sql-beautify" rel="nofollow">SQL Formatter</a></li><li><a href="http://www.cleancss.com/xml-beautify" rel="nofollow">XML Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/css-minify" rel="nofollow">CSS Minify</a></li><li><a href="http://www.cleancss.com/javascript-minify" rel="nofollow">Javascript Minify</a></li><li><a href="http://www.cleancss.com/json-minify" rel="nofollow">JSON Minify</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Internet</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/email-validator" rel="nofollow">Email Validator</a></li><li><a href="http://www.cleancss.com/is-it-up-or-down" rel="nofollow">Is It Up Or Down</a></li><li><a href="http://www.cleancss.com/router-default" rel="nofollow">Default Router Settings</a></li><li><a href="http://www.cleancss.com/user-manuals" rel="nofollow">User Manuals</a></li><li><a href="http://www.cleancss.com/what-is-my-ip" rel="nofollow">What is my IP</a></li> </ul> </li> <li><a data-toggle="modal" href="#JoinModal">Join</a></li><li><a data-toggle="modal" href="#LoginModal">Login</a></li> </ul> </div> </div>  </nav> <div class="container" style="margin-top:30px;margin-bottom:20px;"> <div class="col-md-9 col-xl-10"> <h3 class="text-center hidden-xs hidden-sm hidden">CSS Sprite Generator</h3> <br/> <div class="box"> <div class="box-content">  <div id="ezoic-pub-ad-placeholder-101"> <div style="margin-bottom:20px;margin:auto"> <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>    <link rel="stylesheet" href="spritegen/css/stitches.css">  <style type="text/css"> .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { position: static; clip: rect(0, 0, 0, 0); } .radio + .radio, .checkbox + .checkbox { margin-top: 0; } input[type=text], input[type=number], .add-on { height: auto !important; } </style> <script src="../libs/modernizr/modernizr-2.0.6.min.js"></script> <script data-main="spritegen/js/stitches.js" src="spritegen/require.js"></script>  <div class="stitches"> <img src="spritegen/img/test/github.png" data-name="github"/> <img src="spritegen/img/test/gmail.png" data-name="gmail"/> <img src="spritegen/img/test/linkedin.png" data-name="linkedin"/> <img src="spritegen/img/test/stackoverflow.png" data-name="stackoverflow"/> <img src="spritegen/img/test/tumblr.png" data-name="tumblr"/> <img src="spritegen/img/test/twitter.png" data-name="twitter"/> </div> <br /> <center>  <div id="ezoic-pub-ad-placeholder-101"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-8815422507798180" data-ad-slot="6745801727"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </center> <br /> <h2 class="header">What are CSS Sprites</h2> <p>CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the <code>background-position</code> CSS property can then be used to shift the visible area to the required component image.</p> <p>This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The <a href="http://www.yahoo.com/">Yahoo! home page</a>, for example, employs the technique for exactly this.</p> <h3>Gotchas</h3> <p>There are a couple of really annoying browser bugs to watch out for when creating CSS sprites.</p> <h4>Opera</h4> <p>Opera (at least as far as version 9.0) won't recognise a background position greater than 2042px or smaller than -2042px using that boundary value instead. The tool takes care of this by creating new columns within the image output each time the vertical limit is reached.</p> <h4>Safari</h4> <p><a href="http://creativebits.org/webdev/safari_background_repeat_bug_fix">Safari has a problem with repeating background images</a>. Fortuantely this can be easily solved by specifying a large enough horizontal offset value (configurable).</p> <h3>Further Reading</h3> <p><a href="http://www.alistapart.com/">A List Apart</a> published an article entitled <a href="http://www.alistapart.com/articles/sprites">CSS Sprites: Image Slicing's Kiss of Death</a> which explains the concepts behind CSS sprites. If you're new to this technique we'd strongly suggest heading over to <a href="http://www.alistapart.com/">A List Apart</a> and taking a look.</p> </div> </div> <div style="padding: 20px;text-align:center;"> © Dan's Tools </div> </div>  </div> </div>    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>     <script src="/devops/plugins/bootstrap/bootstrap.min.js"></script>   <script src="/devops/js/devoops.js"></script> <script type="text/javascript"> $(document).ready(function() { // Make all JS-activity for dashboard DashboardTabChecker(); }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regexpal.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com'] ); ga('send', 'pageview'); </script> </body> </html>