How to scale CSS sprites when used as background-image?
Your image sprite has a dimension of 500x400 so define half this size if you want to reduce by 2 on the background-size
then adjust the background-position
to get any icon you want:
.my-sprite { background-image: url("https://i.stack.imgur.com/lJpW8.png"); height:50px; width:50px; background-position:150px 0px; background-size:250px 200px; border:1px solid;}
<div class="my-sprite"></div>
Resize background image sprite component using CSS
add this transform: scale(0.5);
div { background-attachment: scroll; background-clip: border-box; background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png"); background-origin: padding-box; background-position: -55px -44px; background-size: auto; box-sizing: border-box; display: block; font-size: 11px; height: 276px; line-height: 15px; position: absolute; transform: scale(0.5); left: 20px; top: 20px; width: 276px;}
<div></div>
CSS Sprite + background-size:cover
you need to use % according to number of sprites within image for background-size and background-position:
example below with a 3 sprites image:(first div can be resized to play with and see sprite stretching)
div { resize: both; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAyCAMAAACJUtIoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDI3Q0MzNjFEN0RFNzExQUQwMzhERDMyREMwRDFBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2Njg5QjY3NjdEMUQxMUU3OTExOEI2N0ZGOTY1NzY2OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2Njg5QjY3NTdEMUQxMUU3OTExOEI2N0ZGOTY1NzY2OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU0MjdDQzM2MUQ3REU3MTFBRDAzOEREMzJEQzBEMUE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0MjdDQzM2MUQ3REU3MTFBRDAzOEREMzJEQzBEMUE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h3SaNAAAAAZQTFRFKCgo////2hH7kgAAAAJ0Uk5T/wDltzBKAAABGklEQVR42uzZSxKEIBAD0PT9Lz27WVjaJOkGKZU1GR4y8hOxZcFzWfiXtgDytNIEK2MCyOOyahyhAsjjumqU4QLI44ZqEOICyNOOqsOFPMqxpNRZABSL/v8eK5GduexYyhJfqxi3wj7vhKXNQocqKitIljw5xsfalGX8/gJWuCxMZHndNlMsy26gcwxra2J1DNU1scYSd6jtO4jKw/L2WwZLG0Jvd/oYln36wQqWfoqb+iaiMOzzWOhdrZpZ9ol8DsvdCF011MPyVbuyzltqYVVU81gl1dtYNdUsVo/qJSzj2mHBLG8dwcaLdReLvnk7vxFrZkFlkdVrLDSxYktW86YZOou8yV/POsZCOflMLpVvPjeWj6WUnwADAPW9F+6UuMBmAAAAAElFTkSuQmCC) orange no-repeat; color: white; padding: 2em;}
.demo { min-height: 50px; background-size: 300% 90%; background-position: 50% 0; display: inline-block; overflow: scroll;
<div class="demo">resize me</div><div>my sprite</div>
Resize image from sprite using CSS
You can only use the scale
without width
and height
like the following:
.sprite { background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); width:32px; height:32px;}
32px icons:<div class="sprite" style="background-position:0px 32px;"> </div><div class="sprite" style="background-position:64px 32px;"> </div><div class="sprite" style="background-position:32px 96px;"> </div><div class="sprite" style="background-position:0px 0px;"> </div><div class="sprite" style="background-position:32px 64px;"> </div><hr>20px icons (attempts):<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);"> </div><div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));"> </div>
Resize images from sprite
You can use the background-size
property in css3:
background-size: 50% 50%;
CSS background image sprite resizing
I changed the translateY property of transform when it will hover over or click the button.
This might solve your problem.
var button = document.getElementsByClassName('button')[0];
var sprite = document.getElementsByClassName('sprite_image')[0];
var count = 0;
button.onclick = function() {
if (count % 2 == 0) {
sprite.style.transform = "translateY(-136px)";
} else {
sprite.style.transform = "translateY(-1px)";
}
count++;
};
* {
margin: 0px;
padding: 0px;
}
.sprite {
width: 55px;
height: 63px;
overflow: hidden;
}
.sprite img {}
@keyframes move {
0% {
transform: translateY(-0px);
}
50% {
transform: translateY(-63px);
}
100% {
transform: translateY(-126px);
}
}
.sprite button {
border: none;
outline: none;
background-color: white;
cursor: pointer;
}
.sprite button:hover .sprite_image {
transform: translateY(-68px);
}
<div class="sprite">
<button class="button"><img src="https://i.stack.imgur.com/5GrWU.png" class="sprite_image"></button>
</div>
How to dynamically resize CSS button sprites (background image)?
You can use the background-size to set this, as your images are as tall as the buttons but twice the width, you can use ' background-size:200% 100%;'
and then to "switch" the image to the next one you can change the position to be 100%
body { background-color: rgb(0,0,0); margin: 0px; border: 0px black; padding: 0px; }
#parent { background-color: grey; width: 80vw; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items:center; justify-content: center; }
a{ height: 100px; display: flex; }
#alpha a{ width: 100px;
background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0; background-size:200% 100%; } #alpha a:hover { width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; background-size:200% 100%; }
#beta a{ width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0; background-size: 200% 100%;
}
#beta a:hover { width: 100px;
background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; background-size:200% 100%; }
<div id=parent>
<div id="alpha"><a href="#"></a> </div> <div id="beta"><a href="#"></a> </div> </div> </body>
Resizing background sprite image to fit div
You can achieve this using the background-size
property, although the results might not be too pretty, since it stretches the background image.
So, if you know that your sprite is 13x5 cards exactly in size, you can give the cards background-size: 1300% 500%
and then size them any way you want, since the background itself will scale accordingly.
Example
JSFiddle: http://jsfiddle.net/uLnzc/.
HTML
<!-- Hearts --->
<div class="card card-hearts-2"></div>
<div class="card card-hearts-3 card-wide"></div>
<div class="card card-hearts-4 card-high"></div>
<!-- Clubs -->
<div class="card card-clubs-q"></div>
<div class="card card-clubs-k card-wide"></div>
<div class="card card-clubs-a card-high"></div>
CSS
.card {
width: 81px;
height: 117px;
background: url('http://i.stack.imgur.com/WZ9Od.gif') no-repeat;
background-size: 1300% 500%;
}
.card-wide {
width: 100px;
}
.card-high {
height: 130px;
}
/**
* Backgrouns position of all the cards
*
* x offset in %: i * (100/x); i = 0, 1, ..., (x - 1); x = the number of cols in the sprite
* y offset in %: j * (100/y); j = 0, 1, ..., (y - 1); y = the number of rows in the sprite
*/
.card-hearts-2 { background-position: 0 0; }
.card-hearts-3 { background-position: 8.33% 0; }
.card-hearts-4 { background-position: 16.667% 0; }
/* ... */
/* ... */
.card-clubs-q { background-position: 83.333% 50%; }
.card-clubs-k { background-position: 91.667% 50%; }
.card-clubs-a { background-position: 100% 50%; }
You can read about offsetting backgrounds in percentages at MDN.
JSFiddle: http://jsfiddle.net/uLnzc/.
Related Topics
Bootstrap 3 - Disable Navbar Collapse
Css to Make an Empty Cell'S Border Appear
Search Input With an Icon Bootstrap
Forcing Anti-Aliasing Using CSS: Is This a Myth
How to Only Show Certain Parts with CSS for Print
How to Align Left Last Row/Line in Multiple Line Flexbox
What Bug Does Zoom:1; Fix in CSS
CSS Z-Index Issue with Nested Elements
Should I Use Single or Double Colon Notation For Pseudo-Elements
How to Clear the Cache of Nginx
Ordering of Vendor-Specific CSS Declarations
Draw Diagonal Lines in Div Background With Css
Extending Selectors from Within Media Queries with SASS
How to Round Out Corners When Using CSS Clip-Path