Duda sobre propiedad de Content: ''

[tigeek_du]

¿Hola que tal?
Este es la primera vez que publico una duda en forosdelWeb, espero no sea la primera y de igual forma no sea la primera vez que ayude a resolver sus dudas.

Entrando al tema, veran, tengo un inconveniente ya que tengo el siguiente codigo css:

El cual lo que hace es agregar una imagen a un titulo, todo bien hasta alli, pero cuando paso a la resolucion 320px quiero que la imagen sea un poco menos grande, pense agregandole el width:10px al parecer el contenedor de la imagen si se ve afectado pero no la imagen, mantiene su mismo tamaño, mi duda es:
¿Existe alguna propiedad que le diga a lo que hay dentro del conntent: que debe aplicar cierto tamaño, haci como un background-size, o similar.

Espero haberme hecho entender, Muchas gracias.

Captura de pantalla: http://prntscr.com/a2d6rn

Código HTML:

@media (min-width:320px){
  .color_barra:before{
    content: url(images/vineta.png);
    width:10px;
}

[andrinson]

podrias ponerle el tamaño de la imagen en % en ves de px haci siempre ocupa un % de el contenedor sin importar su tamaño ej:
en vez de ponerle un width:25px; podrias ponerle un width:10%;

[tigeek_du]

Iniciado por andrinson

podrias ponerle el tamaño de la imagen en % en ves de px haci siempre ocupa un % de el contenedor sin importar su tamaño ej:
en vez de ponerle un width:25px; podrias ponerle un width:10%;

Em, si eso intente tambien, pero no hasta ahora nada que logro que se ajuste la imagen.

[g3kdigital]

A ver sí comprendo, ya intentaste usar:

Background-size: 10px auto; o 10% auto;

Sí el problema es por la posición de la imagen dentro del elemento, usaste

Background-position: center center;?

La verdad aún no entiendo bien tu duda, podrías ampliarla? Es decir, la imagen que compartiste muestra el error o lo que quieres lograr?

[andresgarciadev]

la propiedad background-size deberia funcionar y de no ser asi.... estas seguro de que no tiene estilos en el propio html?

[ArturoGallegos]

@andresgarciadev
background-size no funciona porque no se trata de un background.

@tigeek_du

Código CSS:

.xxx:before{
content:'';
display:inline-block;
width:10px;
height:15px;
background:url(....);
background-size:100%;
}
 

[tigeek_du]

Iniciado por g3kdigital

A ver sí comprendo, ya intentaste usar:

Background-size: 10px auto; o 10% auto;

Sí el problema es por la posición de la imagen dentro del elemento, usaste

Background-position: center center;?

La verdad aún no entiendo bien tu duda, podrías ampliarla? Es decir, la imagen que compartiste muestra el error o lo que quieres lograr?

Hola, amigo, gracias por la molestia de comentar, modificarle el tamaño a una imagen la cual esta guardado en una propiedad Content='url(img.jpg'), de igual forma no puedo colocar background, por que no es un background