1

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!

5
  • What are you trying to achieve? Can you include html, css, javascript that you have tried at Question? May 15, 2016 at 18:04
  • It's a project where I need to recreate the google results page using html and css. While getting images to use in my recreation I noticed that they bundle lots of images into one source file but are able to display the relevant image on their page and I was curious to know how they did this. I'm at a loss because I'm still a beginner and have only previously encountered image sources where there is one image contained therein. So I haven't written any code to do this yet, as for my project I will just use an image editor to take the bits I want. from the source and save them individually. May 15, 2016 at 18:10
  • I guess, I'm just curious about how/why google bundles these images into one source file and is still able to use them effectively. May 15, 2016 at 18:10
  • @MichaelMartinez Google bundles these so there is only one call to the server for the image rather than several calls to the server to bring in each image separately.
    – haltersweb
    May 15, 2016 at 18:18
  • Thanks again @haltersweb! =) May 15, 2016 at 18:22

4 Answers 4

3

These are known as CSS sprites.

0
2

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

0
1

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.

0
1

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>

1
  • Thanks for this, I will play around with this to get the hang of using them myself! May 15, 2016 at 18:20

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.