19 - Propiedades relacionadas al fondo (background)



Problema:

Definir la imagen fondo.jpg como fondo de la página, luego inicializar y probar la propiedad background-attachment con los dos valores posibles (scroll/fixed)

body {
  background-image:url(fondo.jpg);
  background-repeat:no-repeat;
  background-attachment:scroll;/*luego probar con fixed*/
}

Para probar el efecto que produce esta propiedad debe ingresar en el body de la página un texto muy grande que llene toda la página y permita hacer scroll (de no hacer esto no verá la diferencia entre un valor y otro del background-attachemnt)

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>
<p>Esto es una prueba de texto.</p><p>Esto es una prueba de texto.</p>

</body>
</html>
body {
  background-image:url(fondo.jpg);
  background-repeat:no-repeat;
  background-attachment:scroll;/*luego probar con fixed*/
}
Ver solución


Retornar