0

Estaba añadiendo un background en CSS pero no logro ponerlo con su tamaño original, se cambia de dimensiones por lo que se pone borroso.

Qué ocurre?, probé con porcentajes, pixeles y no logro hacerlo correctamente.

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <body>
    <style>
        body {
              background-image: url("client/img/backg.png");
              background-repeat: no-repeat;
              background-size: 1018px 720px;
             }
    </style>
    </body>
</html>

Pantallazo de web e imagen original

Es error mío o del código?

2
  • Podrías enviarme por algún lado la imagen que mencionas para emularlo? Commented el 8 ene. 2020 a las 1:34
  • 1
    ¿Probaste con background-size: cover;?
    – user128299
    Commented el 8 ene. 2020 a las 4:05

1 respuesta 1

1

Si deseas conservar su tamaño original, no necesitas establecer las dimensiones de la imagen. Por lo tanto, sobra esto: background-size: 1018px 720px;

En este ejemplo uso una imagen de 200 X 300 px:

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <body>
    <style>
        body {
              background-image: url("https://picsum.photos/200/300");
              background-repeat: no-repeat;
             }
    </style>
    </body>
</html>

No tiene caso agregar dimensiones con CSS ya que el navegador las detecta.

Si tu imagen es de 1018 X 720, se vería así: ver snippet en pantalla completa

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <body>
    <style>
        body {
              background-image: url("https://picsum.photos/1018/720");
              background-repeat: no-repeat;
             }
    </style>
    </body>
</html>

En este caso la propiedad background-size es innecesaria.

Tu Respuesta

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

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