Setting up image sprites using 1 url in the CSS


#1

@PaulOB @Ray.H

What I want to do is use only 1 image url in the CSS.

So I would only need to change 1 url in the CSS, instead of all of them if I change an image or something.

The code is already using an image sprite.
I just want it to use 1 image url in it, instead of 6.
https://jsfiddle.net/g6oaht8f/286/

Like how this one is set up:

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

This is where all the image urls, and background positions are located:
https://jsfiddle.net/g6oaht8f/286/

.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -862px;
}

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

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  background-position: 0 -600px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px 0;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: -600px -260px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

.wrapd .img {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -860px -340px;
}

.jacketb,
.wrape {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -520px;
}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: -600px -687px;
}

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background: #000000 url("https://i.imgur.com/Y0CrMX2.png") -866px -616px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

#2

What is the actual question you want us to answer?

You seem to have the sprite set up ok unless I’m missing something?

If you mean you only want to mention the url once then do just that and add all the classes in one go and then set their unique properties in the original rules afterwards.

/* list all relevant classes here - I just made these up*/
.jacketa,
.jacketb,
.jacketc,
.jacketd,
.wraph {
  background-image: url("https://i.imgur.com/Y0CrMX2.png");
background-repeat:no-repeat;
}

#3

Like this?
https://jsfiddle.net/ksp4qoej/1/

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

#4

How come there’s no image on the link code on this one?

You’ll see there’s an image missing.

What happened?

I cannot figure this out at all

Are you able to figure this out at all, or is it a mystery?
https://jsfiddle.net/ksp4qoej/3/

The background position numbers are the same in this code:
https://jsfiddle.net/ksp4qoej/1/

.jacketb,
.wrape {
  background-position: -600px -520px;
}

.wrape {
  background-position: -600px -687px;
}

#5

Solved:

Bad
https://jsfiddle.net/ksp4qoej/13/

.jacketb {
  background: #000000;
}

Good
https://jsfiddle.net/ksp4qoej/15/

.jacketb {
 background-color: #000000;
}

#6

It turns out, using 1 large image sprite is not a good idea.

Major loading issues on 1st load.

Takes 1 sec or over for the page to load.

1200 x 1200
1.28 mb

body:after {
  content: "";
  position: absolute;
  left: -999em;
  top: -999em;
  background: url(https://i.imgur.com/Y0CrMX2.png) no-repeat 0 0;
}

#7

The png format is good when you work on the image and have to save multiple times as it doesn’t degrade in quality with each save as jpg does.

But for the web this is too heavy. If you save it as .jpg with as high quality as 90% and the highest subsampling 4:4:4 it’s size would still be only a little over 300kB.

(And the sprite is the right thing to do.)


#8

It went down to 310kb


#9

I hope you understand why you solved it?:slight_smile:


#10

Why was background-image used there, and not background instead?


#11

I don’t know why, but had background been used, as you can find in the mozilla dev link, all previous set background properties had been reset to initial:

As with all shorthand properties, any omitted sub-values will be set to their initial value.

https://developer.mozilla.org/en-US/docs/Web/CSS/background

So your answer to @PaulOB would be: No I do not. :wink:


#12

It works the same way using just background, instead of background-image.

I don’t see a difference.

background
https://jsfiddle.net/ksp4qoej/18/

    background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat;   
}

background-image
https://jsfiddle.net/ksp4qoej/1/

    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

#13

Please read my post again, especially the Mozilla Dev quote. :wink:


#14

No I do not what?

I don’t get it.


#15

Read post #5, then post #9.


#16

Say this in your voice :slight_smile:

“No I do not understand that the css property ‘background’ is a shorthand property and resets all the other background properties to their default if not specified.”

That means that a background- colour would be lost if you set a background image just using the shorthand property.

As you were supplying multiple values t o multiple elements you need to be careful that you don’t undo the previous values by using a shorthand property unwisely.

In the end you can do what you want as long as you know what you are doing which is why I asked you the question in the first place. There is a difference between being able to solve something on purpose rather than accidentally solving it :slight_smile:


#17

Thank you for explaining that.


#18

How come Chrome isn’t lined up correctly, but firefox is, and how would that be fixed?

And it’s only these two images it’s happening to.

If the background positions are set up correctly for each image, and they all work fine in firefox, how come Chrome isn’t producing the same result?

https://jsfiddle.net/ksp4qoej/1/

1st Image:

.jacketb,
.wrape {
  background-position: -600px -520px;
}

2nd Image:

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-color: #000000;
  background-position: -866px -616px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

Chrome:
image

Firefox:
image


#19

@asasass: this was explained recently in another of your threads:

Adding background color behind an image

If you don’t understand something you are told, then please ask for further clarification. It is much better to take a little longer and get a thorough understanding of a concept than have to keep asking the same question. Nobody will mind giving a more detailed explanation, if asked.


#20

Not on a computer at the moment so can’t check but I believe you also asked this question before?

Look through your old threads and see if you can find a similar problem.