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

Question

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

please explain it more clearly! I can't understand what you are talking about! are you looking for background-size ? — Mohammad Areeb Siddiqui
– Mohammad Areeb Siddiqui, Commented Jul 8, 2013 at 9:08
What specifically you cannot understand? I want that my middle background will stretch toghether with text from ` <div class="box-middle">` — Denees
– Denees, Commented Jul 8, 2013 at 9:18

casraf · Accepted Answer · 2013-07-08 09:12:54Z

2

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.

answered Jul 8, 2013 at 9:12

casraf

21.8k10 gold badges60 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denees Over a year ago

Ok, so the solution is to extract the middle background from sprites.png and use it apart from it?

casraf Over a year ago

If your height is undeclared and can vary, yes, that is what I would recommend. Sprites are great for buttons, tabs, etc. where the height is fixed and will not change

Space Cadet · Accepted Answer · 2013-07-08 09:25:33Z

2

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.

answered Jul 8, 2013 at 9:25

Space Cadet

1431 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related