CODEWITHSUNDEEP
htmlcss
Denees
Denees

Reputation: 9198

CSS background-position and background-repeat within a CSS sprite

I have a box that has a border around it, I split it into 3 parts like in this image (top, middle and bottom):

enter image description here

The box is placed in a wrapper, here is my piece of code:

CSS:

.wrapper { background: url("../images/sprites.png") no-repeat; }
.box-top { background-position: -258px -234px; width: 685px; height: 35px; }
.box-middle { background-position: -258px -271px; width: 684px; height: 1px; }
.box-bottom { background-position: -258px -274px; width: 685px; height: 35px; }

HTML:

<div class="wrapper">
   <div class="box-top"></div>
   <div class="box-middle">
       Lorem ipsum dolor sit amet
   </div>
   <div class="box-bottom"></div>
</div>

Well the problem is that I am trying to make it to show up normally when text stretches to bottom, but I can't, because all my images are arranged in a sprite, and as you see from .box-middle the height is 1px and if I'll change that to more then the whole sprite will show up instead of only image position that I have indicated. Maybe I'm doing something wrong? I want to please you guys to point me in the right direction. Thanks

Upvotes: 0

Views: 229

Answers (2)

Space Cadet
Space Cadet

Reputation: 143

Well the first thing I noticed is that the top, middle and bottom don't have a background-image set. Is it supposed to be like that?

background-image:url('top.png');
background-repeat: repeat-y;

Should do the trick.

Upvotes: 2

casraf
casraf

Reputation: 21694

If you use sprites, you need a fixed size. You can't crop a background. You can, however, use background-size: cover to stretch it across the width and keep it in proportions. But that wouldn't help you if your background size is small, because stretching up will lose its quality. If your sprite is large, this might be a decent solution, but you'll need to experiment to see how your specific sprite size works with it.

Upvotes: 2

Related Questions