CODEWITHSUNDEEP
css
santa
santa

Reputation: 12512

repeat background from sprite

I would like to create a sprite with several images that will be used as background. Some of them will be used with norepeat and some will have repeat-x.

What's the best way to setup such styles?

So far I've tried this but it does not work properly:

css

.sprites {
    background-color: transparent;
    background-image: url(img/sprites.png);
        background-repeat: no-repeat;
}
.bg {
    width: 1px;
    height: 25px;
    background-position: 0 0;
    background-repeat: repeat-x;
}

html

<div class="sprites bg">

</div>

Is this even possible?

Upvotes: 1

Views: 161

Answers (2)

bingjie2680
bingjie2680

Reputation: 7773

I think the best way to go for this is to separate the nonrepeated Bgs from repeated ones. put all norepeated bgs in one sprite image. For repeated ones, you can only put them together if they have the same width, and you have to place them vertically.

Upvotes: 1

Andrew
Andrew

Reputation: 2780

If you will only be repeating in the x-direction, make sure you place the images vertically. That is, don't place two different images side-by-side.

http://www.phpied.com/background-repeat-and-css-sprites/

Upvotes: 1

Related Questions