CODEWITHSUNDEEP
htmljquerycsscss-sprites
Alpha
Alpha

Reputation: 52

Make CSS Sprite Image resize accordingly as the browser zoom is altered

I'm using css sprite and currently this is how it looks like Icon is part of sprite It stays fine but when i start changing the zoom of the browser nearby image starts to bleed in the image Adjacent logo bleeding in I tried increasing the padding by 100px as well but it is not a correct solution.

I need to ensure the sprite image stays in correct aspect and doesn't bleeds as the page is zoomed.

I tried using a div wrapper but in this case it is not wroking. here's the code

.icon {
    width: 512px;; height: 512px;;
    background-size: auto 70%;
    height: 70%;
    background-position: center center;
    cursor: pointer;
    background-size: cover !important;
    background-repeat-x: no-repeat;
    /*zoom: 0.049;*/
    background: url("../resources/images/css_sprites_ico.png") 1px -3657px;
}

and the code where this is implemented is this

 {name:'setup',index:'setup',label:'Setup',width:80,align:"center",search:false,sortable:false,cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
                      var classes = "icon";

Upvotes: 2

Views: 176

Answers (1)

Vinutha K Shetty
Vinutha K Shetty

Reputation: 307

.icon {
    width: 512px; 
    height: 512px;
    background: url("../resources/images/css_sprites_ico.png") no-repeat;
    background-size: 1024px 1024px; /* If your sprite image is 1024px by 1024px */
    background-position: -1024px -2048px; /* Adjust according to the exact position */
    cursor: pointer;
}

with this updated css 'background-size' and 'background-position' values with the actual dimensions and position in your sprite image, ensures that your sprite image maintains its integrity without bleeding when zoomed in or out

Upvotes: 0

Related Questions