Trying to get image sprite to work here

#1

What am I doing wrong?
https://jsfiddle.net/9t4en3ad/3/

.jacket-left,
.jacket-right{
background: url("https://i.imgur.com/baApP9x.png") no-repeat -2px -2px;
}

.jacket-right{
background-position: -2px -84px;
}
#2

Hi there asasass,

you must either do it like this…

.jacket-left,
.jacket-right {
    background-image: url(https://i.imgur.com/l0QmDbB.png);
    background-repeat: no-repeat;
    background-position: -2px -2px;
 }

.jacket-right {
    background-position: -2px -84px;
 }

…or like this…

.jacket-left {
    background: url(https://i.imgur.com/baApP9x.png) no-repeat  -2px -2px;
 }

.jacket-right {
    background: url(https://i.imgur.com/baApP9x.png) no-repeat   -2px -84px;

 }

Mixing shorthand and longhand is the cause of the problem. :wonky:

coothead

4 Likes
#3

How come shorthand property works in this instance?
https://jsfiddle.net/5mnzh42q/4/

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/baApP9x.png") no-repeat 0 0;
}

.container-left .wraph {
  background-position: 0 -600px;
}

But this won’t work like this.
https://jsfiddle.net/9t4en3ad/3/

.jacket-left,
.jacket-right{
background: url("https://i.imgur.com/baApP9x.png") no-repeat -2px -2px;
}

.jacket-right{
background-position: -2px -84px;
}
#4

It is working but as you are only offsetting by 84px you still get the same black square. The rest of the image is miles below that.

baApP9x.png600×1200 524 KB 

.jacket-right{
background-position: -2px -600px;
}
1 Like
#5

I was using the wrong image url.

Fixed:
https://jsfiddle.net/gLpe5z8j/

.jacket-left,
.jacket-right{
background: url("https://i.imgur.com/baApP9x.png") no-repeat -2px -2px;
}

.jacket-right{
background-position: -2px -84px;
}
1 Like