E. Imagen de fondo

Salida.


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5	<meta charset="UTF-8">
6	<meta name="viewport"
7	content="width=device-width">
8	<title>Fondo</title>
9	<style>
10	html {
11	/* Como el fondo es oscuro, se
12	* escoje un color de letra que
13	* no se pierda. */
14	color: white;
15	/* URL de la imagen de fondo. En
16	* este caso está hospedada en
17	* "giphy.com". */
18	background-image:
19	url(https://media.giphy.com/media/3oKIPhf02cXU9W4Le0/giphy.gif);
20	/* La imagen de fondo no se
21	* repite en caso de que sea más
22	* pequeña que el elemento en
23	* que se coloca. En este caso
24	* html es la ventana. */
25	background-repeat: no-repeat;
26	/* La imagen de fondo se muestra
27	* centrada horizontalmente. */
28	background-position-x:
29	center;
30	/* La imagen de fondo se muestra
31	* centrada verticalmente. */
32	background-position-y:
33	center;
34	/* La imagen de fondo se muestra
35	* fija y no se desplaza. */
36	background-attachment:
37	fixed;
38	/* Distintas propiedades para
39	* distintos navegadores
40	* indicando que la imagen de
41	* fondo tiene un tamaño que
42	* cubre toda la ventana. */
43	-webkit-background-size: cover;
44	-moz-background-size: cover;
45	-o-background-size: cover;
46	background-size: cover;
47	}
48
49	/* Estilo para las anclas o
50	* hipervínculos. */
51	a {
52	/* Como el fondo es oscuro, se
53	* escoje un color de letra que
54	* no se pierda y se distinga
55	* del resto del texto. */
56	color: yellow;
57	}
58	</style>
59	</head>
60
61	<body>
62	<h1>Fondo</h1>
63	<p>
64	Este ejemplo te muestra como
65	poner fondo a una página.
66	</p>
67	<footer>
68	<p>
69	© 2022
70	Gilberto Pacheco Gallegos.
71	</p>
72	<p>
73	Imagen de
74	<a href="https://giphy.com">
75	https://giphy.com</a>.
76	</p>
77	</footer>
78	</body>
79
80	</html>

skip_previous skip_next