Background imagen fondo HTML

publicado por: Anonymous

Tengo una imagen de fondo de mi página web llamada “fondo_campo1.jpg”, el problema lo tengo a la hora de visualizar la imagen en tamaño completo.

La imagen se repite si el tamaño no es mayor que el tamaño de la resolución de la pantalla. Y si pongo la propiedad: background-repeat:no-repeat; la parte que falta la pone en blanco.

URL de la imagen: https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-casa-en-el-paisaje-de-campo-verde-con-cielo-azul-Foto-de-archivo.jpg

¿Qué debo hacer?

_x000D_

_x000D_

body{_x000D_
  background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
    <html lang="es">_x000D_
    	<head>_x000D_
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />_x000D_
    		<title>Reservar</title>_x000D_
    		<link rel="stylesheet" href="css/estilos_reservar.css">_x000D_
    	</head>_x000D_
    	_x000D_
    	<body>_x000D_
    		//..._x000D_
    	</body>_x000D_
    </html>

_x000D_

_x000D_

_x000D_

solución

Prueba a definir en el CSS el body de esta manera

body {font-family: 'Tinos', serif;

background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

background-attachment hace que la imagen de fondo no se vaya con el scroll de la página.

El resto de propiedades, son especificas para cada navegador, que no de problemas o bien propiedades mas comunes y por eso no te explico que hacen

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *