problemas con background

[rascabuchitos]

hola señores
alguien puede orientarme con esto?

tengo mas clases con otras medidas
la cuestion es... donde ubico el background para no repetirlo?

gracias…¡¡¡

Código HTML:

<ul>
<li class="option1">Opción 1</li>
<li class="option2">Opción 2</li>
<li class="option3">Opción 3</li>
</ul>
 

Código CSS:

.option1, .option2, .option3 {
padding-left:55px;
height:50px;
width:0px;
background:url(iconos-sociales.png) no-repeat;
}
.option1 {background-position: -63px -20px;}
.option2 {background-position: -255px -20px;}
.option3 {background-position: -190px -213px;}
 

[pzin]

Podrías añadir otra clase al elemento en el HTML:

Código HTML:

<ul>
  <li class="option1 fondo">Opción 1</li>
  <li class="option2 fondo">Opción 2</li>
  <li class="option3 fondo">Opción 3</li>
</ul>
 

Y luego crear esa clase en CSS:

Código CSS:

.option1, .option2, .option3 {
  padding-left: 55px;
  height: 50px;
  width: 0;
}
 
.fondo {
  background:url(iconos-sociales.png) no-repeat;
}
 

Si el valor de alguna propiedad es cero, no hace falta que especifiques la unidad de medida. Cero es cero, en px, em, pt o lo que sea.

También depende un poco de dónde vayas a aplica ese fondo. Por ejemplo, si siempre es a un LI, te valdría hacer algo así, por simplificar:

Código HTML:

<ul class="fondo">
  <li class="option1">Opción 1</li>
  <li class="option2">Opción 2</li>
  <li class="option3">Opción 3</li>
</ul>
 

Código CSS:

.fondo li {
  background: url(iconos-sociales.png) no-repeat;
}