CSS Image Sprites
You are Here:
CSS Image Sprites
CSS Image Sprites is a performance optimization technique that combines multiple images into a single image.
It reduces network congestion by reducing the number of downloads needed to render multiple images.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
margin-top: 15px;
width: 181px;
height: 163px;
}
#maleHappy{
background: url("frog.png") 0px 0px;
}
#maleSurprise{
background: url("frog.png") 416px 0px;
}
#maleSad{
background: url("frog.png") 181px 0px;
}
#femaleHappy{
background: url("frog.png") 0px 163px;
}
#femaleSurprise{
background: url("frog.png") 416px 163px;
}
#femaleSad{
background: url("frog.png") 181px 163px;
}
</style>
</head>
<body>
<h1>CSS Image Sprites Technique</h1>
<p>The images used in this example is from single source <a href="/frog.png" target="_blank">frog.png</a></p>
<h2>Male - Happy</h2>
<div id="maleHappy">
</div>
<h2>Male - Surprise</h2>
<div id="maleSurprise">
</div>
<h2>Male - Sad</h2>
<div id="maleSad">
</div>
<h2>Female - Happy</h2>
<div id="femaleHappy">
</div>
<h2>Female - Surprise</h2>
<div id="femaleSurprise">
</div>
<h2>Female - Sad</h2>
<div id="femaleSad">
</div>
</body>
</html>
Using JavaScript
In the following example, we will demonstrate how to use the CSS Image Sprites technique using JavaScript.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
margin-top: 15px;
width: 181px;
height: 163px;
background: url("frog.png") 0px 0px;
}
</style>
</head>
<body>
<h1>CSS Image Sprites Technique</h1>
<div></div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementsByTagName("div")[0];
function myFunction(){
x.style.background = "url('frog.png') 181px 0px";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
