2

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?

body{
  background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
}
<!DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>Reservar</title>
    		<link rel="stylesheet" href="css/estilos_reservar.css">
    	</head>
    	
    	<body>
    		//...
    	</body>
    </html>

1
  • Hola @omaza1990. Creo que la etiqueta background es una meta-etiqueta, y hay que ser cuidadoso al momento de crear etiquetas... Esta misma etiqueta ya había sido eliminada antes (se discutió en [¿Qué uso le damos a la etiqueta [background]?](es.meta.stackoverflow.com/q/2060/127))
    – Mariano
    Commented el 6 feb. 2018 a las 23:02

2 respuestas 2

4

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

2

Puedes usar:

background-repeat: no-repeat;
background-size: 100%;
background-position: center;

O background-size: cover;

EDITO: De este modo obtienes lo que buscas: background-size: 100% 100%;

div {
height: 100px;
width: 400px;
background-image: url("https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-casa-en-el-paisaje-de-campo-verde-con-cielo-azul-Foto-de-archivo.jpg");
}

.imagen{
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
<div class="imagen">
</div>

3
  • De esta forma sí se ve al 100% pero no se ve la imagen en sí, solo se ve la parte superior de la imagen... de la mitad hacia abajo no se ve nada (en pantalla completa). Si hubiera un scroll o más contenido que no abarque solamente en pantalla completa, sin scrool, sí se vería el total de la imagen.
    – omaza1990
    Commented el 18 dic. 2017 a las 9:41
  • De este modo se verá partiendo del centro de la imagen. Si tuvieses una pantalla desproporcionado la imagen se vería desproporcionada, y no creo que sea lo óptimo.
    – Flowen
    Commented el 18 dic. 2017 a las 9:54
  • Edito la respuesta según tu necesidad @omaza1990
    – Flowen
    Commented el 18 dic. 2017 a las 9:58

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.