<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Fondo</title>
<style>
html {
/* Como el fondo es
* oscuro, se escoje un
* color de letra que no
* se pierda. */
color: white;
/* URL de la imagen de
* fondo. Es este caso
* está hospedada en
* "giphy.com". */
background-image:
url(https://media.giphy.com/media/3oKIPhf02cXU9W4Le0/giphy.gif);
/* La imagen de fondo no
* se repite en caso de
* que sea más pequeña que
* el elemento en que se
* coloca. En este caso
* html es la ventana. */
background-repeat: no-repeat;
/* La imagen de fondo se
* muestra centrada
* horizontalmente. */
background-position-x:
center;
/* La imagen de fondo se
* muestra centrada
* verticalmente. */
background-position-y:
center;
/* La imagen de fondo se
* muestra fija y no se
* desplaza. */
background-attachment:
fixed;
/* Distintas propiedades
* para distintos
* navegadores indicando
* que la imagen de fondo
* tiene un tamaño que
* cubre toda la ventana.
*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Estilo para las anclas o
* hipervínculos. */
a {
/* Como el fondo es
* oscuro, se escoje un
* color de letra que no
* se pierda y se distinga
* del resto del texto. */
color: yellow;
}
</style>
</head>
<body>
<h1>Fondo</h1>
<p>
Este ejemplo te muestra como
poner fondo a una página.
</p>
<footer>
<p>
© 2022
Gilberto Pacheco Gallegos.
</p>
<p>
Imagen de
<!--
Ancla o hipervínculo a
un sitio. El contenido
es el texto que se
muestra subrayado y al
hacer clic en el
hipervínculo se abre la
URL indicada en el
atributo href.
href="https://giphy.com"
La URL que abre este
hipervínculo es
https://giphy.com
-->
<a href="https://giphy.com">
https://giphy.com</a>.
</p>
</footer>
</body>
</html>