How to shift image while using background-position css

Question

To style the scrollbar on my page, I used to have the following CSS. It gave me the perfect result and aligned the image in the center of the scrollbar.

background: #3395d2 url('img/thumb.png') no-repeat center;
border-radius: 8px;
border: 1px solid #004c98;

However, I then I took the background and created a sprite using other small images on my page. Then to style the image on the scrollbar again, I used the following CSS. However, this time it was not aligned in the center.

background: #3395d2 url('img/small-images.png') no-repeat center;
border-radius: 8px;
border: 1px solid #004c98;
background-position: 0 -702px;

How can I edit my code so that the image still aligns in the middle of the scrollbar, despite being in a sprite?

JSFiddle

@Vector jsfiddle.net/g5Fz6 The top text box is the before, and the bottom one is the current. — user3320550
– user3320550, Commented Feb 19, 2014 at 21:30
Essentially you'll have to set the background-size to where only the part you want is showing. Not sure what that is, you'll have to play around with it — Zach Saucier
– Zach Saucier, Commented Feb 19, 2014 at 22:44

jakealbaugh · Accepted Answer · 2014-02-20 02:21:16Z

first of all, the center doesn't even matter once you redefine background-position.

background: #3395D2 url('http://s21.postimg.org/3ymz2gr8n/small_images.png') no-repeat center;

is the same as saying:

background-color: #3395D2;
background-image: url('http://s21.postimg.org/3ymz2gr8n/small_images.png');
background-repeat: no-repeat;
background-position: center;

so when you say

background-position: 0 -702px;

after saying

background-position: center;

you are overriding it.

that said, you have another issue. just because it's a sprite doesn't mean CSS treats each image in your sprite like a separate image. if you align it vertically, you will see the other images in your sprite. i would suggest making the sprite horizontal instead of vertical, then adjusting the background-position-x (the 0 in your current code) to select the image you want in your sprite, and background-position-y (the -702px in your current code) to center it vertically on the scroll bar.

Collectives™ on Stack Overflow

How to shift image while using background-position css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related