CODEWITHSUNDEEP
htmlcss
John Balls
John Balls

Reputation: 11

CSS - Use 1 image to many of them

In bootstrap.css, there is a main image where there are all the icons and stuff.

How can I use CSS to display an image in the "main image" ?

Would I use margin?

Upvotes: 0

Views: 61

Answers (2)

painotpi
painotpi

Reputation: 6996

It's called a CSS sprite and you can access different images in the sprite by using the background-position property.

something like this,

background: url('main-sprite.png') -10px -10px;

where -10px -10px is the x and y positions of the image in the sprite.

Upvotes: 0

Guffa
Guffa

Reputation: 700192

That's called an image sprite. You display it as a background image and use background position to specify the area to be visible.

For example displaying an area that is 20x20 pixels at 40,100 in the image:

.myIcon {
  width: 20px; height: 20px;
  background: url(spriteimage.png) -40px -100px;
}

Upvotes: 4

Related Questions