CODEWITHSUNDEEP
javascripthtmlcssimageweb
Michael Martinez
Michael Martinez

Reputation: 191

How to select specific image from source file when multiple images are in the source file?

I've noticed that google's image source files for their pages may contain lots of images in one source, but then only one will be displayed in a specific position.

for example, this: "https://www.google.co.uk/images/nav_logo242.png" is one image source file for google's results page but then they will somehow choose a specific part of this source to display in a part of their webpage.

I would like to replicate this somehow but don't know how this is accomplished?

I only know how to use an image source when you use one image at a time and display all of it.

Thanks in advance to anyone who can help me!

Upvotes: 1

Views: 908

Answers (4)

haltersweb
haltersweb

Reputation: 3139

That type of image is called a sprite. You would put the image as a background of an element and then use css to position that background to show only what you want to see.

Here's an example of how to use it. In the first example I am using a div. In the second example I am using a pseudo element to place it in a larger element so there will be no bleed of other parts of the image.

.google, .camera::before {
  background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
  width: 120px;
  height: 40px;
  background-position: -22px 2px;
  border: 1px solid red;
}
.camera {
  position: relative;
  padding-left: 30px;
  font-size: 1.5rem;
}
.camera::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  background-position: -40px -131px;
}
.camera:hover::before {
    background-position: -60px -131px;
}
<div class="google"></div>
<p class="camera">
  Hover over me.
</p>

Upvotes: 1

Bkjain655
Bkjain655

Reputation: 200

These are CSS-Sprites.

Basic detail on CSS-Sprite, Here 1 image will consists many images. On using sprites unnecessary bandwidth use will be reduced.

To access individual images background-position CSS property plays main role.

Upvotes: 1

Wietse de Vries
Wietse de Vries

Reputation: 673

These are called sprites, you can check out this link to find out how to use them: http://www.w3schools.com/css/css_image_sprites.asp

Upvotes: 2

c-smile
c-smile

Reputation: 27460

These are known as CSS sprites.

Upvotes: 3

Related Questions