CSS Sprite Sheet using multiple backgrounds

Question

I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.

In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.

Simple code:

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  width: auto;
  height: 40px;
  background-size: 319px 349px, auto;
}

<div id="nav1"></div>

And the problem is I don't want to show these 2 icons. I want to show only the first one:

How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.

Yes, I guess. I want to remove these 2 icons and show only the first one. This effect is like height or width does but I can't use it in the multiple background :/ — Lukas Naujokaitis, Jul 22 '17 at 19:47

score 2 · Accepted Answer · answered Jul 22 '17 at 19:51

2

It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  background-size: auto;
  height: 40px;
  width: auto;
}

i.icon1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
  background-size: 319px 349px;
  display: inline-block;
  height: 40px;
  width: 40px;
}

<div id="nav1"><i class="icon1"></i></div>

If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.

answered Jul 22 '17 at 19:51

Aurel Bílý

7,068
1
21
34

Nice answer, thank you. I have one question: why do u use `` instead of ``. Is it better? – Lukas Naujokaitis Jul 22 '17 at 19:57
@LukasNaujokaitis No, there is no real reason, other than a "convention" set by Font Awesome. The reason they use ``, AFAIK, is because it is only one character long and you could say it stands for "icon". – Aurel Bílý Jul 22 '17 at 19:59
But `` element means "italic". Is it ok? – Lukas Naujokaitis Jul 22 '17 at 20:01
@LukasNaujokaitis If you keep it empty, nobody will know :) – Aurel Bílý Jul 22 '17 at 20:02
Hehe, thanks. Anyway, I found a good article about this thing: https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span. It seems like using `` is a bad practise but some people use it because of the reasons you said. – Lukas Naujokaitis Jul 22 '17 at 20:05

Gerard · Answer 2 · 2017-07-22T20:20:46.963

1

You would have to specify a width.

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
  width: 40px;
  height: 40px;
  background-size: 319px 349px, auto;
  position: relative;
}

#nav1:after {
  content: "";
  background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  width: 232px;
  height: 40px;
  position: absolute;
  z-index: -1;
}

<div id="nav1"></div>

edited Jul 22 '17 at 20:20

answered Jul 22 '17 at 19:49

Gerard

15,418
5
30
52

It crops yellow bar. – Lukas Naujokaitis Jul 22 '17 at 19:54

CSS Sprite Sheet using multiple backgrounds

2 Answers2