Trying to get image sprite to work here

HTML & CSS
1

What am I doing wrong?

.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?

.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.

.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.

600×1200 524 KB

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

I was using the wrong image url.

Fixed:

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

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.