How to Scale CSS Sprites When Used as Background-Image

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



Leave a reply



Submit