CODEWITHSUNDEEP
htmlcssbackground-imagecss-sprites
Deepika Rao
Deepika Rao

Reputation: 155

image-sprite size is bigger than container, how to fit it into a smaller container

The size of the sprite is bigger than the container, without using the tag is there any method to fix the size to fit the container

Dimension of the image-sprite is 562px (x5) width x 562px height

main-desktop.png

.container_outer{
  height:200px;
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("main-desktop.png");
  background-repeat:no-repeat;
  height:562px;
  width:562px;
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -562px 0px;
}
.container_outer > .firefox-part{
  background-position: -1124px 0px;
}
.container_outer > .opera-part{
  background-position: -1686px 0px;
}
.container_outer > .safari-part{
  background-position: -2248px 0px;
}
<div class="container_outer">	
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></div>
</div>

Upvotes: 3

Views: 681

Answers (1)

ppasler
ppasler

Reputation: 3729

The key is the background-size property and the cover value. This scales the sprite to the maximum size of the container. I've made an example with the containers being 200px squares.

.container_outer{
  height:200px; /* assuming a square container 200px */
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("https://i.sstatic.net/2VKyZ.png");
  background-repeat:no-repeat;
  background-size: cover;  /*  as large as possible */
  height:100%;
  width:200px;  /* assuming a square container 200px */
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -200px 0px;
}
.container_outer > .firefox-part{
  background-position: -400px 0px;
}
.container_outer > .opera-part{
  background-position: -600px 0px;
}
.container_outer > .safari-part{
  background-position: -800px 0px;
}
<div class="container_outer">	
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></div>
</div>

Upvotes: 1

Related Questions