1

Tengo un código HTML y mi deseo es poner una imagen como background del y que esté centrada.

Este es mi código:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
      
    <style>
        body{
            
            width:30%;
            height:30%;
            margin:0 auto;
            background-size: cover;
            background-color:grey;
            background-image: url("logo.png");
            background-position: 50% 50%;
            
        }
    </style>
  </head>
  <body>
  </body>
</html>

El problema es que me sale demasiado grande y alineada arriba de la pantalla, por lo tanto se corta en la mitad.

¿Alguna ayuda?

2
  • ¿Cómo esperas que sea el resultado final, podrías poner una imagen? ¿Cúal es el tamaño de la imagen logo.png? Commented el 31 ago. 2020 a las 6:22
  • @AlejandroRivas Nosé como poner una imagen, pero basicamente es poner al <body> una imagen de fondo y que esta imagen esté centrada. Las dimensiones de mi imagen son 500x500
    – Maginon
    Commented el 31 ago. 2020 a las 7:38

1 respuesta 1

1

Funcionamiento

Cuando se agrega un background a un contenedor (como puede ser el body) los parámetros de fondo se agregan por css a través de las propiedades background-*. Sin embargo todas las demás propiedades ( como width o height ) son del contenedor, no del background.

Propiedades del fondo (más comunes):

  • background-color: determina el color de fondo
  • background-size: tamaño de la imagen, puede ser [cover, initial, contain, un %, un valor en px]
  • background-image: url o fuente de la imagen
  • background-position: posición de inicio con respecto a su contenedor
  • background-repeat: ¿debe repetirse la imagen?

Solución

Cuando pones la posicion como 50% 50% estas haciendolo con rspecto a su contenedor, como tu html esta vacio el contenedor apenas mide unos pixeles de alto, es decir tu imagen se coloca a la mitad de ese contenedor no de la pantalla:

screenshot

Bueno entonces tenemos que hacer el body más grande ¿pero que tan grande?... del tamaño de la pantalla. Como verás eso tiene varios inconvenientes, pero podemos hacerlo.

body{
        height: 100%; /*respecto a html*/
    }
html{
        height: 100%; /*respecto a la ventana*/
    }

Ahora tenemos contenedores que cubren toda la pantalla... pero hacen falta algunos ajustes al background:

body{
        background-color:grey;
        background-size: initial;
        background-image: url("logo.png");
        background-position:center center; /*respecto a body*/
        background-repeat: no-repeat;
        height: 100%;
    }
  • Ponemos el background-size en initial para que tome el tamaño original de tu imagen (puedes probar con contain)

  • Definimos que el fondo no se va a repetir

  • Y dejamos la posición en center center, que es igual a 50% 50% pero prefiero esta notación

Resultado

introducir la descripción de la imagen aquí

1
  • Muchisimas gracias Alejandro! Funciono correctamente!
    – Maginon
    Commented el 31 ago. 2020 a las 10:15

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.