¿Cómo hago para que el fondo de la pantalla de mi pagina web se vea completo y ocupando todo el espacio?
No quiero queden 4 imagenes de la misma imagen de fondo. Es decir, no se como hacer que la imagen se agrande al tamaño completo de la panalla en vez de mostrar un mosaico con la imagen repetida.
Hello friend.
Este suena a un problemilla que a veces no se soluciona con CSS, pero si hay una posibilidad de que funcione, y es colocando esto en el CSS:
body {
background: url(tumagen.gif) no-repeat center top;
}
¡Espero te sea de ayuda!
Postdata: Si no se soluciona con esto, escribime en los comentarios a ver si te puedo ayudar, porque no siempre la solucion esta en el CSS. Bye
A veces para que tu fondo se vea bien, y ocupe todo el espacio de la pantalla, te viene bien usar también el atributo background-size con "cover".
Y luego hay otra situación que te puede dar problemas y es que el contenido de tu página no llegue a completar todo el espacio de la ventana del navegador, por lo que el fondo no conseguiría en principio ocupar todo el espacio de la página, si las proporciones de la imagen no se corresponden con las proporciones de la ventana, lo que es difícil que ocurra siempre.
En esos casos tienes que colocar un height 100% tanto en la etiqueta HTML como en la etiqueta body.
Un ejemplo sería más o menos así.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
background-image: url(https://picsum.photos/seed/picsum/1500/800);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<p>No voy a completar el tamaño y el fondo debe crecer igualmente.</p>
</body>
</html>