Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Sprites and repeating backgrounds

I'd like to keep all my small images in one sprite file, for example:

enter image description here

Now suppose I want to add a thin background image which is meant to repeat-x over 100% the width of an element:

enter image description here

Does this have to be stored as a seperate entity, or can I somehow store it in the sprite image? I can't work out if it's possible to do a background-repeat over a section of a sprite, I think not but I'm fairly sure I've seen it done somewhere.

like image 661
Tom Gullen Avatar asked Feb 19 '11 15:02

Tom Gullen


People also ask

How do I stop a background image from repeating CSS?

To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.

What are the 4 options on background-repeat?

1, the background-repeat property had four options: no-repeat , repeat , repeat-x and repeat-y .

Is background-repeat a CSS property?

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.


2 Answers

I’m not sure if this is in CSS3 already, but the Gecko engine (Firefox 4 …) adds image-rect as -moz-image-rect which allows you to select a specific part of an image for usage. With that you can select a part of your sprite as the background image and then repeat it.

It is definitely not wide-spread or standard yet though.

What I like to do is do 3 kinds of sprites. One with icons, where you don’t use repeats at all, one for horizontal-repeating images, and one for vertical-repeating images.

That way you can add several to be repeated backgrounds to one sprite but not have that much of a hassle using it.

like image 112
Kissaki Avatar answered Oct 20 '22 17:10

Kissaki


You'd have to make it full width of the sprite image. Otherwise it could leak other images or blank space when being repeated.

Remeber that repeating really small background images (1-2px wide) can have terrible impact on performance - it's always better to use a bit larger images for that so even if it would be wee wide - it can actually be better page rendering wise then 1px wide one.

EDIT: (regarding your edit)

If your element is fixed height you can put it on your sprite width 100% width of the sprite with the required max-height of the element. Or if you know that its max width is smaller then the width of the sprite then make it a rectangle with the max width and height of your element.

If you dont know the max height and you want to put it at the very top so the gradient eases into a solid color it can be done if you put your repeated image at the very bottom of the sprite and position it with negative top value background-position: 0px -300px where 300px is the distance from the top of your sprite to the top of the background image on your sprite.

Look here how google positioned repeated BG on a sprite:

google sprite

like image 45
Tom Tu Avatar answered Oct 20 '22 17:10

Tom Tu