1 00:00:00,940 --> 00:00:08,060 Hola, hoy vamos a ver un vídeo sobre cómo configurar los fondos de pantalla de nuestras páginas web. 2 00:00:09,259 --> 00:00:19,199 Yo ya para esto me he creado un archivo, un archivo HTML, como veis aquí en pantalla, que se llama fondos.html. 3 00:00:20,079 --> 00:00:30,219 Y lo que he hecho ya directamente, he puesto la estructura como hacemos siempre y he dejado unas características que a partir de ahora vamos a ir arrastrando con ellas siempre. 4 00:00:30,219 --> 00:00:38,179 que van a ser el tipo de fuente y voy a aumentar el tamaño de la fuente y voy a poner 1,125 rem, ¿vale? 5 00:00:38,619 --> 00:00:47,240 Ya vimos en anteriores vídeos las unidades que se pueden utilizar en hojas de estilo y todo esto, así que, bueno, para que tengáis una idea, ¿vale? 6 00:00:49,140 --> 00:00:52,219 Vale, pues lo primero que vamos a hacer es darle contenido a esta página, ¿vale? 7 00:00:52,219 --> 00:01:11,719 Y para eso lo que vamos a hacer, el contenido que vamos a poner, lo voy a poner entre comentarios en HTML, va a ser un div, es decir, una caja contenedora que va a tener a su vez 20 párrafos con texto Lorem Ipsum, ¿vale? 8 00:01:12,780 --> 00:01:17,959 Vamos a hacer eso y esto lo vamos a hacer utilizando un atajo de emet, ¿vale? Para que sea más rápido. 9 00:01:17,959 --> 00:01:20,340 Lo voy a poner también aquí, eso. 10 00:01:22,219 --> 00:01:28,379 Para hacer este atajo vamos a poner la palabra dip, luego vamos a poner el símbolo de mayor que, ¿vale? 11 00:01:28,379 --> 00:01:38,120 Y vamos a poner p, porque vamos a poner un párrafo, y como vamos a poner 20, vamos a multiplicarlo por 20, p por 20, ¿vale? 12 00:01:38,359 --> 00:01:44,540 Y dentro de ese párrafo vamos a poner un texto lorem ipsum, ¿vale? 13 00:01:45,099 --> 00:01:49,200 Entonces, esto que veis aquí lo vamos a copiar, ¿vale? 14 00:01:49,200 --> 00:02:05,799 No voy a ponerlo aquí para que sepáis, atajo M, ¿vale? Y eso de ahí lo vamos a copiar, lo ponemos aquí, ¿vale? Fijaros que ya la página web asume como si fuera un elemento, pero no lo va a ser, porque vamos a pulsar la tecla tabulador, ¿vale? Recuerdo, la tecla de la izquierda de la Q. 15 00:02:05,799 --> 00:02:12,139 Y al pulsarla, pues fijaros que me aparece mis 20 párrafos, ¿vale? 16 00:02:14,080 --> 00:02:19,060 Y ya no le vamos a hacer más caso al contenido porque nos vamos a centrar en el fondo de pantalla. 17 00:02:19,620 --> 00:02:27,460 Entonces, para poner el fondo de pantalla, como vamos a poner el fondo sobre el cuerpo de la página, ¿vale? 18 00:02:27,639 --> 00:02:31,560 Pues vamos a poner, vamos a modificar todo esto sobre el body, ¿vale? 19 00:02:31,780 --> 00:02:36,780 Si quisiéramos poner solo el fondo en un dip o solo el fondo en un párrafo, ¿vale? 20 00:02:37,120 --> 00:02:39,960 Pues lo podríamos hacer también igualmente, fijaros, ¿vale? 21 00:02:40,539 --> 00:02:43,680 En primer lugar, vamos a imaginarnos que solo lo queremos hacer en todo el cuerpo. 22 00:02:43,819 --> 00:02:51,099 Entonces, aquí vamos a poner la propiedad background-color, ¿vale? 23 00:02:51,199 --> 00:02:52,620 Para poner un color de fondo. 24 00:02:53,539 --> 00:02:56,599 Y esto, pues lo que vamos a hacer es poner background-color. 25 00:02:57,840 --> 00:03:01,259 Y ahora ponemos en hexadecimal el color que queramos, ¿vale? 26 00:03:01,379 --> 00:03:05,340 Yo pongo este, que es como un gris así oscuro, ¿vale? 27 00:03:05,340 --> 00:03:24,800 Como decía, yo puedo poner también un fondo dentro de un párrafo, ¿vale? Yo puedo ponerme aquí una etiqueta P, por ejemplo, ¿vale? Para que sea un poco diferente vamos a ponerle a este un ID que sea fondo verde, ¿vale? Por ejemplo, o fondo rojo, ¿vale? 28 00:03:24,800 --> 00:03:34,939 Y modificamos aquí, ponemos una almohadilla, fondo rojo, y ahora vamos a poner background color, ¿vale? 29 00:03:35,340 --> 00:03:39,879 Y ponemos el rojo, que sería el FF000, ¿vale? 30 00:03:40,099 --> 00:03:44,439 Y fijaros que ahora el fondo de ese párrafo es rojo, ¿vale? 31 00:03:45,000 --> 00:03:46,800 Yo podría jugar con todo esto. 32 00:03:48,780 --> 00:03:57,139 Ahora, ¿qué pasa si nosotros lo que queremos, en vez de poner un fondo de pantalla, ¿vale? 33 00:03:57,159 --> 00:04:01,659 En vez de poner un color de fondo, lo que queremos es poner un fondo de pantalla, ¿vale? 34 00:04:01,659 --> 00:04:04,979 Es decir, que haya una imagen. 35 00:04:05,620 --> 00:04:09,300 Entonces, fijaros, yo me voy a ir a mi navegador, ¿vale? 36 00:04:09,840 --> 00:04:14,460 Y yo ya me he creado dentro de donde tengo mis códigos con los que estamos trabajando, 37 00:04:14,599 --> 00:04:17,500 que son todos estos códigos los que llevamos hasta ahora. 38 00:04:18,240 --> 00:04:24,000 Tengo mi carpeta Images y aquí dentro me he descargado una imagen de Pixabay, ¿vale? 39 00:04:24,019 --> 00:04:25,420 Que se llama imagen fondo. 40 00:04:25,500 --> 00:04:26,899 Y la he llamado imagen fondo, ¿vale? 41 00:04:27,699 --> 00:04:36,120 Entonces, con eso, yo ahora lo que hago es que en mi código de brackets, ¿vale? 42 00:04:36,279 --> 00:04:41,279 En mi código HTML, voy a poner lo siguiente. 43 00:04:42,160 --> 00:04:43,420 Voy a poner un punto y coma aquí. 44 00:04:45,769 --> 00:04:46,209 Y ahora voy a poner... 45 00:04:48,800 --> 00:04:50,920 Bueno, voy a eliminar este color de fondo, ¿vale? 46 00:04:51,240 --> 00:05:00,600 Era solo para que veáis que se puede poner un color de fondo también dentro de otro elemento, no tiene por qué ser el body, ¿vale? 47 00:05:01,480 --> 00:05:03,779 Propiedad para imagen de fondo. 48 00:05:05,439 --> 00:05:18,180 Y ahora, es recomendable, lo voy a poner aquí, poner antes background color por si la imagen no carga correctamente, ¿vale? 49 00:05:18,180 --> 00:05:25,199 Es decir, es importante que pongamos un color de fondo por si nuestra imagen no carga bien, por lo que sea, ¿vale? 50 00:05:25,379 --> 00:05:30,339 Entonces, vamos a poner aquí background image, ¿vale? 51 00:05:30,480 --> 00:05:33,680 Y vamos a poner dentro url, ¿vale? 52 00:05:34,000 --> 00:05:42,500 Y ahora, entre comillas, vamos a buscar nuestra imagen que estaba dentro de la carpeta images y se llama imagen fondo, ¿vale? 53 00:05:43,720 --> 00:05:46,600 Y ahora fijaros, yo me vengo aquí, actualizo mi página. 54 00:05:46,600 --> 00:05:55,360 y ya veis que se ve toda la imagen, todo el fondo de pantalla con esa imagen, ¿vale? 55 00:05:56,839 --> 00:05:58,560 Pero, ojo, una cosa importante. 56 00:05:59,259 --> 00:06:02,079 Esta imagen que yo he descargado no es tan grande, ¿vale? 57 00:06:02,500 --> 00:06:11,240 Por defecto, CSS lo que hace es que repite la imagen alrededor de formas que ocupe todo el documento, ¿vale? 58 00:06:11,439 --> 00:06:14,439 Pero vamos a imaginarnos que yo no quiero que eso se repita, ¿vale? 59 00:06:14,439 --> 00:06:27,519 Yo no quiero que la imagen se repite, quiero que sea una única imagen. Eso lo podemos modificar con una propiedad para gestionar cómo se repite la imagen de fondo, ¿vale? 60 00:06:27,519 --> 00:06:53,839 Y esa propiedad es background repeat, ¿vale? Y tenemos varias opciones, que son repeat, ¿vale? Que sería el por defecto, si no ponemos nada sume eso, tiene la opción de no repeat, para no repetirlo, y luego tiene la opción repeat x, para repetirlo solo en el eje x, en horizontal, ¿vale? 61 00:06:53,839 --> 00:06:57,899 Y repeat while, para repetirlo solo en el eje vertical. 62 00:06:58,120 --> 00:07:00,160 Vamos a ver los efectos de cada uno, ¿vale? 63 00:07:00,600 --> 00:07:03,699 Si yo pongo background repeat, ¿vale? 64 00:07:03,920 --> 00:07:05,720 Y voy a poner repeat. 65 00:07:06,319 --> 00:07:09,939 Y fijaros que no hay ningún efecto, no se ve ningún cambio, ¿vale? 66 00:07:10,000 --> 00:07:13,319 ¿Por qué? Porque, como digo, esta es la propiedad por defecto, ¿vale? 67 00:07:13,819 --> 00:07:17,740 Vamos a ver ahora si yo pongo no repeat, ¿vale? 68 00:07:18,019 --> 00:07:22,379 Fijaros, ahora mismo aparece la imagen en su tamaño real, 69 00:07:22,379 --> 00:07:30,160 Esa era la imagen que yo he descargado y el resto aparece el color de fondo que yo había puesto antes, ¿vale? Ese gris. ¿Ok? 70 00:07:32,740 --> 00:07:41,879 Otra de las opciones que teníamos que os decía antes era repetirlo solo en el eje horizontal, ¿vale? Fijaros que solo se está repitiendo en el eje horizontal, ¿vale? 71 00:07:41,879 --> 00:07:44,180 La imagen llega más o menos hasta aquí, ¿vale? 72 00:07:44,300 --> 00:07:45,839 Y a partir de aquí se repite. 73 00:07:46,180 --> 00:07:49,180 Y de la misma forma en el eje vertical, ¿vale? 74 00:07:49,759 --> 00:07:55,480 Fijaros, la imagen llega hasta aquí y luego se va repitiendo hacia abajo, ¿vale? 75 00:07:56,120 --> 00:07:59,699 En este caso yo voy a poner no repeat, ¿vale? 76 00:07:59,879 --> 00:08:00,759 Que no se repita. 77 00:08:00,959 --> 00:08:04,379 Porque ahora voy a gestionar cómo mover esa imagen de fondo, ¿vale? 78 00:08:05,019 --> 00:08:11,680 Entonces, para mover esa imagen de fondo, o para posicionar la imagen de fondo, mejor dicho, 79 00:08:11,680 --> 00:08:40,210 ¿Vale? Utilizamos background position ¿Vale? Y en este caso admite palabras clave o valores numéricos ¿Vale? Y lo que es importante es que el primer eje, el primer valor, perdón, es el eje horizontal y el segundo el vertical ¿Vale? 80 00:08:40,210 --> 00:08:43,610 Si no ponemos nada, asume una media entre los dos, más o menos, ¿vale? 81 00:08:43,710 --> 00:08:49,549 Entonces, vamos a ver, background, position, ¿vale? 82 00:08:49,710 --> 00:08:54,730 Fijaros, si yo pongo ahora mismo cualquiera de estas cinco palabras clave, yo pongo left, ¿vale? 83 00:08:55,029 --> 00:08:59,210 La imagen aparece centrada en la página, ¿vale? 84 00:08:59,450 --> 00:09:00,370 Pero a la izquierda. 85 00:09:00,990 --> 00:09:03,370 Si yo pongo right, hace el mismo efecto. 86 00:09:03,750 --> 00:09:09,950 La centra en el eje vertical, pero en el eje horizontal la desplaza a la derecha. 87 00:09:09,950 --> 00:09:26,629 Si yo pongo bottom, la centra en el eje vertical, ¿vale? Pero la mueve abajo del todo. Y si yo pongo top, lo mismo. La centra en el eje horizontal, me he dicho antes vertical, pero me refería a horizontal, perdón. 88 00:09:26,970 --> 00:09:37,889 La centra en el eje horizontal y la coloca en la parte superior. Y por último está el center, que lo que haría es que la centra en los dos ejes, ¿vale? 89 00:09:37,889 --> 00:09:55,450 Vamos a ver cómo podemos mezclar esas palabras claves, ¿vale? Vamos a imaginarnos que yo pongo left, que ya hemos dicho que esto sería en el eje horizontal, si yo pongo varios valores, quiero decir, si yo pongo left, ahora mismo me está haciendo eje vertical centrado y eje horizontal izquierda, ¿vale? 90 00:09:55,450 --> 00:10:25,360 Si yo ahora pongo aquí top, ¿vale? Fijaros que me lo posiciona arriba a la izquierda. Si yo pongo bottom, abajo a la izquierda, ¿vale? De tal forma que yo así podría jugar con estas posiciones, ¿vale? Yo ahora mismo estoy center bottom, ¿vale? Podría poner center center, ¿vale? Que si os dais cuenta este center center, si yo ahora remuevo esto, es lo mismo que poner solo center, ¿vale? No tiene ningún sentido. 91 00:10:25,360 --> 00:10:43,860 Vale, y esto también lo puedo hacer con valores numéricos, ¿vale? Imaginaros que yo quiero poner un 20%, ¿vale? Sería el eje horizontal top, ¿vale? Pues entonces me desplaza respecto del eje horizontal un 20% y me lo posiciona arriba del todo, ¿vale? 92 00:10:43,860 --> 00:11:11,710 Que quiero que sea un poco más, 50%, ¿vale? Que correspondería más o menos a la mitad, ¿vale? Es como si yo pusiera aquí un center top, ¿vale? Sería lo mismo, ¿ok? Vale, ahora vamos a ver otra propiedad interesante porque vamos a imaginarnos que yo quiero que esta imagen ocupe toda la pantalla, ¿vale? 93 00:11:11,710 --> 00:11:13,970 Pero no quiero que se repita, sino que sea esta imagen. 94 00:11:14,389 --> 00:11:21,090 Entonces, para eso, vamos a llamarlo a esto, cómo escalar la imagen de fondo, ¿vale? 95 00:11:21,110 --> 00:11:21,990 Cómo escalarla. 96 00:11:22,730 --> 00:11:29,610 Entonces, para ello vamos a utilizar una propiedad que se llama background-size, ¿vale? 97 00:11:29,610 --> 00:11:32,029 Y tiene diferentes propiedades. 98 00:11:32,190 --> 00:11:35,429 Tiene auto, que sería el valor por defecto, ¿vale? 99 00:11:35,730 --> 00:11:38,570 Tiene la opción cover, ¿vale? 100 00:11:38,570 --> 00:11:55,230 Tiene la opción contain y tiene la opción de valor numérico, ¿vale? Entonces, fijaros, yo pongo background size, ¿vale? No voy a poner auto porque sería lo mismo, bueno, lo puedo poner, pero fijaros que no produce ningún cambio. 101 00:11:55,230 --> 00:12:14,190 Si yo pongo un contain, ¿vale? Lo que hace es que mi imagen ocupa toda la parte visible, ¿vale? Toda la parte visible que se carga una vez que la página sea abierta, ¿vale? Es decir, que no está realmente ocupando todo, sino que ocupa la ventana en sí, digamos. 102 00:12:14,190 --> 00:12:33,590 ¿Vale? Si yo quiero que ocupe todo, que lo cubra todo, lo que tendría que utilizar sería la opción Cover, ¿vale? Y fijaros que ahora sí, si yo me desplazo hacia abajo, la imagen ha aumentado de tamaño, pierdo calidad, eso hay que saberlo, ¿vale? Pero me ocupa toda la pantalla, ¿vale? Toda la ventana, perdón, toda la página. 103 00:12:33,590 --> 00:12:37,370 Y por último tenemos la opción de poner valores numéricos, ¿vale? 104 00:12:37,370 --> 00:12:39,669 Yo puedo poner aquí, por ejemplo, 40%, ¿vale? 105 00:12:40,549 --> 00:12:42,409 Y me escala la imagen en esa posición. 106 00:12:42,590 --> 00:12:46,210 También puedo poner 60 píxeles, ¿vale? 107 00:12:46,389 --> 00:12:48,250 O 60 centímetros, ¿vale? 108 00:12:48,990 --> 00:12:50,950 Lo que sea, cualquier unidad de las que hayamos visto. 109 00:12:51,070 --> 00:12:52,309 60 en, ¿vale? 110 00:12:53,950 --> 00:12:55,610 Cualquiera de las cositas que hayamos visto, ¿vale? 111 00:12:55,830 --> 00:12:59,409 En este caso yo la voy a dejar como auto, ¿vale? 112 00:13:01,409 --> 00:13:03,490 O bueno, vamos a ponerla un poquito más pequeña. 113 00:13:03,590 --> 00:13:06,850 Vamos a ponerla al 85%, ¿vale? 114 00:13:08,350 --> 00:13:10,149 Y vamos a la última propiedad. 115 00:13:12,149 --> 00:13:13,629 Muy interesante, ¿vale? 116 00:13:14,350 --> 00:13:20,500 Porque es una propiedad que gestiona el comportamiento de la imagen de fondo. 117 00:13:24,480 --> 00:13:30,409 El comportamiento de la imagen de fondo, ¿vale? 118 00:13:30,909 --> 00:13:33,470 Y vamos a fijaros qué significa esto, ¿vale? 119 00:13:34,309 --> 00:13:39,190 Observad que yo pongo ahora mismo aquí background, la propiedad de esto. 120 00:13:39,190 --> 00:13:40,429 Se me olvidó ponerlo, ¿vale? 121 00:13:40,529 --> 00:13:42,850 Es background attachment 122 00:13:42,850 --> 00:13:43,769 ¿Vale? 123 00:13:43,990 --> 00:13:46,169 Y vamos a darle principalmente dos opciones 124 00:13:46,169 --> 00:13:48,190 Que son scroll y fix 125 00:13:48,190 --> 00:13:48,870 ¿Vale? 126 00:13:49,529 --> 00:13:52,610 Y vamos a ver cómo funciona porque es muy interesante 127 00:13:52,610 --> 00:13:55,370 Background attach, ¿vale? 128 00:13:55,529 --> 00:13:58,990 Y vamos a poner, por ejemplo, la primera propiedad que es scroll 129 00:13:58,990 --> 00:13:59,330 ¿Vale? 130 00:14:00,470 --> 00:14:02,129 Esta es la propiedad por defecto 131 00:14:02,129 --> 00:14:04,090 Esto es importante apuntarlo 132 00:14:04,090 --> 00:14:06,490 Por defecto 133 00:14:06,490 --> 00:14:06,690 ¿Vale? 134 00:14:06,769 --> 00:14:07,549 Fijaros qué pasa 135 00:14:07,549 --> 00:14:16,330 Si yo ahora tengo aquí mi imagen de fondo y yo hago scroll, que significa desplazarme hacia abajo en la página, la imagen de fondo se queda arriba, ¿vale? 136 00:14:16,809 --> 00:14:21,389 Donde yo la había posicionado, yo había dicho que estuviera aquí en center top, ¿vale? 137 00:14:21,769 --> 00:14:25,990 Entonces la imagen se queda donde está, arriba en el centro, ¿vale? 138 00:14:26,250 --> 00:14:27,889 Y si yo bajo, se sigue quedando ahí. 139 00:14:28,269 --> 00:14:32,090 Sin embargo, fijaros qué pasa si yo pongo fix, ¿vale? 140 00:14:33,049 --> 00:14:36,190 Yo ahora mismo hago, cuando yo vaya a hacer scroll, fijaros lo que pasa. 141 00:14:36,190 --> 00:14:38,529 hago scroll, pero la imagen 142 00:14:38,529 --> 00:14:40,450 se viene conmigo, ¿vale? 143 00:14:40,690 --> 00:14:41,909 siempre va conmigo 144 00:14:41,909 --> 00:14:44,070 entonces digamos que yo así 145 00:14:44,070 --> 00:14:46,490 no tendría la necesidad de, por ejemplo 146 00:14:46,490 --> 00:14:48,450 en el tamaño, ¿vale? 147 00:14:49,330 --> 00:14:50,210 cuando nosotros 148 00:14:50,210 --> 00:14:52,289 cuando explicaba antes el concepto de cover 149 00:14:52,289 --> 00:14:53,309 fijaros que en cover 150 00:14:53,309 --> 00:14:57,690 la diferencia entre cover y contain, ¿vale? 151 00:14:57,769 --> 00:14:58,529 es que contain 152 00:14:58,529 --> 00:15:01,409 ocupaba todo lo visible 153 00:15:01,409 --> 00:15:03,210 cover ocupaba todo lo visible, ¿vale? 154 00:15:03,590 --> 00:15:05,409 sin embargo yo ahora si pongo contain 155 00:15:05,409 --> 00:15:07,110 el contenido 156 00:15:07,110 --> 00:15:12,889 Quiero decir, ¿vale? Pues fijaros que yo ahora podría desplazarme y estaría todo el rato viendo la página, ¿vale? 157 00:15:14,309 --> 00:15:22,129 ¿Ok? Pues estas son las opciones que tenéis para poner imágenes de fondo, ¿vale? 158 00:15:22,269 --> 00:15:25,049 O poner colores de fondo en vuestras páginas web, ¿vale? 159 00:15:25,909 --> 00:15:28,509 Bueno, pues espero que haya sido útil.