> Faqs > Hacer un fondo de imagen que no se repita como un mosaico

Hacer un fondo de imagen que no se repita como un mosaico

Hola buenas tardes!! mi duda en este momento es...

¿Cómo puedo evitar que el fondo en la pagina web se vea en mosaicos?

O sea, quiero que se vea la imagen entera y que no se repita. ¿Hay forma de hacerlo sin tener que buscar una imagen con la cantidad necesaria de pixels, que ocupa toda la pagina?

Tengo una imagen de 225x225 pixels

Respuestas

Con CSS puedes definir perfectamente cómo quieres que se comporte el fondo de tu página. Por supuesto puedes hacer que la imagen no se repita y que ocupe toda la página si lo deseas.

Sin embargo, lo más seguro es que necesites una imagen más grande, porque de 225x225 es muy pequeñita. Si quieres que la imagen de fondo ocupe toda la página necesitarías una imagen bastante mayor, de modo que al redimensionarse no se quede muy feo.

Si simplemente quieres que no se repita la imagen puedes usar este CSS:

body {
	background-image: url('css.jpg');
	background-repeat: no-repeat;
}

Pero la imagen se quedará en la parte de arriba y el resto de la página te aparecerá sin fondo de imagen.

Entonces puedes hacer algo como esto para que la imagen de fondo se expanda de manera que ocupe el máximo espacio posible manteniendo las proporciones de la imagen:

body {
	background-image: url('css.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

Pero si quieres que use todo el espacio de la página tendrías que poner algo como esto:

body {
	background-image: url('css.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

Lo que pasa en esta última alternativa es que la imagen se va a deformar, para que ocupe todo el tamaño, estirándose sin mantener las proporciones.

Supongo que sabrás usar CSS. Si no, puedes aprender en el Manual de CSS.

Sergio
366 11 32 13