What is a CSS image sprite?
A
A single image containing multiple smaller images B
An animated GIF C
A type of image filter D
A CSS property
Analysis & Theory
A CSS image sprite is a single image file containing multiple smaller images combined.
Why are image sprites used in web development?
A
To reduce the number of HTTP requests B
To increase image quality C
To make images larger D
To add animation effects
Analysis & Theory
Image sprites reduce the number of HTTP requests, improving page load times.
Which CSS property is used to display a specific part of an image sprite?
A
background-position B
background-size C
background-repeat D
background-color
Analysis & Theory
`background-position` shifts the background image to show the desired sprite section.
If you want to show the top-left part of a sprite image, which `background-position` value would you use?
A
background-position: 0 0; B
background-position: -100px -100px; C
background-position: 50% 50%; D
background-position: 100px 100px;
Analysis & Theory
`0 0` positions the background at the top-left corner.
How do you prevent the sprite image from repeating when used as a background?
A
background-repeat: repeat; B
background-repeat: no-repeat; C
background-size: contain; D
background-attachment: fixed;
Analysis & Theory
`background-repeat: no-repeat;` ensures the image does not tile or repeat.
What property is often set to control the size of the displayed sprite section?
A
width and height of the element B
padding C
margin D
border
Analysis & Theory
The element’s `width` and `height` control how much of the sprite is visible.
Which CSS property would you use to resize the entire sprite image background?
A
background-size B
background-position C
background-repeat D
background-origin
Analysis & Theory
`background-size` changes the size of the background image.
Why is it important to set the element's width and height explicitly when using sprites?
A
To prevent the image from stretching B
To ensure the correct portion of the sprite is visible C
To enable animations D
To add borders
Analysis & Theory
Setting width and height defines the visible area, showing only the intended sprite.
How can you create a hover effect with image sprites?
A
Change the background-position on :hover B
Change background-repeat on :hover C
Change background-size on :hover D
Use animation property
Analysis & Theory
Changing `background-position` on hover switches to a different part of the sprite.
Which of the following is NOT an advantage of using CSS image sprites?
A
Reducing HTTP requests B
Faster page load times C
Simpler image editing D
Less bandwidth usage
Analysis & Theory
Image sprites make image editing more complex, not simpler.