0

Estoy tratando de insertar una foto en mi página, usé la siguiente información para poner la foto:

background-image: url(../../Pictures/espacio.img);
background-position:center;
background-repeat: no-repeat;
background-size: cover;

El resultado no fue el que esperaba, la foto se ve muy pixeleada, ya que se esparció por toda la página.

¿Qué necesito agregar para que la foto se vea bien?

4
  • ¿Cómo debería verse?, ¿del tamaño original?
    – Gerry
    el 5 jun. 2017 a las 18:10
  • 1
    pues deberias proporcinar mas informacion al respecto si quieres ayuda. Prueba copiando el codigo donde usaste la imagen, los estilos que usaste, si esta o no dentro de otro div, cuales proporciones tienen estos div...etc.. Debes tener en cuenta que al usar una imagen para background, el tamaño del contenedor de esta no puede ser mayor al tamaño d ela foto, porque esta va a perder calidad....es por eso importante que puedas compartir tu codigo para determinar que se puede hacer... el 5 jun. 2017 a las 18:11
  • Probaste con background-size: auto; ?
    – Jemonge
    el 5 jun. 2017 a las 19:53
  • ya, creo que el problema es porque la imagen la guarde directamente de google y la inserte tal y como estaba. el 5 jun. 2017 a las 21:08

1 respuesta 1

0

Debes tener en cuenta que... si la imagen es menor tamaño que tu pantalla y utilizas la propiedad background-size: cover; Lo que haces con ello es forzar la imagen a que CUBRA todo el contenido o tamaño donde estes poniendo tu imagen.

Si quieres esa foto si o si, tienes dos opciones:

1) Crear esa misma imagen en mayor tamaño que sea igual o superior al tamaño donde se va a mostrar, por lo que dejará de pixelarse

2) Reducir el tamaño donde muestras la imagen y esto es eliminando la propiedad que usaste background-size: cover; y le das un height y ``width` a tu imagen pero claro, será tan tan grande como la imagen en si misma sea. Nunca debemos olvidar que el código modifica lo que ya tienes. Si tu imagen es pequeña..agrandarla siempre va a pixelar. Saludos! =)

2
  • perfecto, gracias! el 5 jun. 2017 a las 21:01
  • Para eso estamos. Recuerda valorar positivamente la solución para que otros puedan encontrarla antes. Saludos!
    – user42165
    el 5 jun. 2017 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.