Activa JavaScript para disfrutar de los vídeos de la Mediateca.
CSS - Fondos - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Hola, hoy vamos a ver un vídeo sobre cómo configurar los fondos de pantalla de nuestras páginas web.
00:00:00
Yo ya para esto me he creado un archivo, un archivo HTML, como veis aquí en pantalla, que se llama fondos.html.
00:00:09
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.
00:00:20
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?
00:00:30
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?
00:00:38
Vale, pues lo primero que vamos a hacer es darle contenido a esta página, ¿vale?
00:00:49
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?
00:00:52
Vamos a hacer eso y esto lo vamos a hacer utilizando un atajo de emet, ¿vale? Para que sea más rápido.
00:01:12
Lo voy a poner también aquí, eso.
00:01:17
Para hacer este atajo vamos a poner la palabra dip, luego vamos a poner el símbolo de mayor que, ¿vale?
00:01:22
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?
00:01:28
Y dentro de ese párrafo vamos a poner un texto lorem ipsum, ¿vale?
00:01:38
Entonces, esto que veis aquí lo vamos a copiar, ¿vale?
00:01:45
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.
00:01:49
Y al pulsarla, pues fijaros que me aparece mis 20 párrafos, ¿vale?
00:02:05
Y ya no le vamos a hacer más caso al contenido porque nos vamos a centrar en el fondo de pantalla.
00:02:14
Entonces, para poner el fondo de pantalla, como vamos a poner el fondo sobre el cuerpo de la página, ¿vale?
00:02:19
Pues vamos a poner, vamos a modificar todo esto sobre el body, ¿vale?
00:02:27
Si quisiéramos poner solo el fondo en un dip o solo el fondo en un párrafo, ¿vale?
00:02:31
Pues lo podríamos hacer también igualmente, fijaros, ¿vale?
00:02:37
En primer lugar, vamos a imaginarnos que solo lo queremos hacer en todo el cuerpo.
00:02:40
Entonces, aquí vamos a poner la propiedad background-color, ¿vale?
00:02:43
Para poner un color de fondo.
00:02:51
Y esto, pues lo que vamos a hacer es poner background-color.
00:02:53
Y ahora ponemos en hexadecimal el color que queramos, ¿vale?
00:02:57
Yo pongo este, que es como un gris así oscuro, ¿vale?
00:03:01
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?
00:03:05
Y modificamos aquí, ponemos una almohadilla, fondo rojo, y ahora vamos a poner background color, ¿vale?
00:03:24
Y ponemos el rojo, que sería el FF000, ¿vale?
00:03:35
Y fijaros que ahora el fondo de ese párrafo es rojo, ¿vale?
00:03:40
Yo podría jugar con todo esto.
00:03:45
Ahora, ¿qué pasa si nosotros lo que queremos, en vez de poner un fondo de pantalla, ¿vale?
00:03:48
En vez de poner un color de fondo, lo que queremos es poner un fondo de pantalla, ¿vale?
00:03:57
Es decir, que haya una imagen.
00:04:01
Entonces, fijaros, yo me voy a ir a mi navegador, ¿vale?
00:04:05
Y yo ya me he creado dentro de donde tengo mis códigos con los que estamos trabajando,
00:04:09
que son todos estos códigos los que llevamos hasta ahora.
00:04:14
Tengo mi carpeta Images y aquí dentro me he descargado una imagen de Pixabay, ¿vale?
00:04:18
Que se llama imagen fondo.
00:04:24
Y la he llamado imagen fondo, ¿vale?
00:04:25
Entonces, con eso, yo ahora lo que hago es que en mi código de brackets, ¿vale?
00:04:27
En mi código HTML, voy a poner lo siguiente.
00:04:36
Voy a poner un punto y coma aquí.
00:04:42
Y ahora voy a poner...
00:04:45
Bueno, voy a eliminar este color de fondo, ¿vale?
00:04:48
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?
00:04:51
Propiedad para imagen de fondo.
00:05:01
Y ahora, es recomendable, lo voy a poner aquí, poner antes background color por si la imagen no carga correctamente, ¿vale?
00:05:05
Es decir, es importante que pongamos un color de fondo por si nuestra imagen no carga bien, por lo que sea, ¿vale?
00:05:18
Entonces, vamos a poner aquí background image, ¿vale?
00:05:25
Y vamos a poner dentro url, ¿vale?
00:05:30
Y ahora, entre comillas, vamos a buscar nuestra imagen que estaba dentro de la carpeta images y se llama imagen fondo, ¿vale?
00:05:34
Y ahora fijaros, yo me vengo aquí, actualizo mi página.
00:05:43
y ya veis que se ve toda la imagen, todo el fondo de pantalla con esa imagen, ¿vale?
00:05:46
Pero, ojo, una cosa importante.
00:05:56
Esta imagen que yo he descargado no es tan grande, ¿vale?
00:05:59
Por defecto, CSS lo que hace es que repite la imagen alrededor de formas que ocupe todo el documento, ¿vale?
00:06:02
Pero vamos a imaginarnos que yo no quiero que eso se repita, ¿vale?
00:06:11
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?
00:06:14
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?
00:06:27
Y repeat while, para repetirlo solo en el eje vertical.
00:06:53
Vamos a ver los efectos de cada uno, ¿vale?
00:06:58
Si yo pongo background repeat, ¿vale?
00:07:00
Y voy a poner repeat.
00:07:03
Y fijaros que no hay ningún efecto, no se ve ningún cambio, ¿vale?
00:07:06
¿Por qué? Porque, como digo, esta es la propiedad por defecto, ¿vale?
00:07:10
Vamos a ver ahora si yo pongo no repeat, ¿vale?
00:07:13
Fijaros, ahora mismo aparece la imagen en su tamaño real,
00:07:18
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?
00:07:22
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?
00:07:32
La imagen llega más o menos hasta aquí, ¿vale?
00:07:41
Y a partir de aquí se repite.
00:07:44
Y de la misma forma en el eje vertical, ¿vale?
00:07:46
Fijaros, la imagen llega hasta aquí y luego se va repitiendo hacia abajo, ¿vale?
00:07:49
En este caso yo voy a poner no repeat, ¿vale?
00:07:56
Que no se repita.
00:07:59
Porque ahora voy a gestionar cómo mover esa imagen de fondo, ¿vale?
00:08:00
Entonces, para mover esa imagen de fondo, o para posicionar la imagen de fondo, mejor dicho,
00:08:05
¿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?
00:08:11
Si no ponemos nada, asume una media entre los dos, más o menos, ¿vale?
00:08:40
Entonces, vamos a ver, background, position, ¿vale?
00:08:43
Fijaros, si yo pongo ahora mismo cualquiera de estas cinco palabras clave, yo pongo left, ¿vale?
00:08:49
La imagen aparece centrada en la página, ¿vale?
00:08:55
Pero a la izquierda.
00:08:59
Si yo pongo right, hace el mismo efecto.
00:09:00
La centra en el eje vertical, pero en el eje horizontal la desplaza a la derecha.
00:09:03
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.
00:09:09
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?
00:09:26
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?
00:09:37
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.
00:09:55
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?
00:10:25
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?
00:10:43
Pero no quiero que se repita, sino que sea esta imagen.
00:11:11
Entonces, para eso, vamos a llamarlo a esto, cómo escalar la imagen de fondo, ¿vale?
00:11:14
Cómo escalarla.
00:11:21
Entonces, para ello vamos a utilizar una propiedad que se llama background-size, ¿vale?
00:11:22
Y tiene diferentes propiedades.
00:11:29
Tiene auto, que sería el valor por defecto, ¿vale?
00:11:32
Tiene la opción cover, ¿vale?
00:11:35
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.
00:11:38
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.
00:11:55
¿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.
00:12:14
Y por último tenemos la opción de poner valores numéricos, ¿vale?
00:12:33
Yo puedo poner aquí, por ejemplo, 40%, ¿vale?
00:12:37
Y me escala la imagen en esa posición.
00:12:40
También puedo poner 60 píxeles, ¿vale?
00:12:42
O 60 centímetros, ¿vale?
00:12:46
Lo que sea, cualquier unidad de las que hayamos visto.
00:12:48
60 en, ¿vale?
00:12:51
Cualquiera de las cositas que hayamos visto, ¿vale?
00:12:53
En este caso yo la voy a dejar como auto, ¿vale?
00:12:55
O bueno, vamos a ponerla un poquito más pequeña.
00:13:01
Vamos a ponerla al 85%, ¿vale?
00:13:03
Y vamos a la última propiedad.
00:13:08
Muy interesante, ¿vale?
00:13:12
Porque es una propiedad que gestiona el comportamiento de la imagen de fondo.
00:13:14
El comportamiento de la imagen de fondo, ¿vale?
00:13:24
Y vamos a fijaros qué significa esto, ¿vale?
00:13:30
Observad que yo pongo ahora mismo aquí background, la propiedad de esto.
00:13:34
Se me olvidó ponerlo, ¿vale?
00:13:39
Es background attachment
00:13:40
¿Vale?
00:13:42
Y vamos a darle principalmente dos opciones
00:13:43
Que son scroll y fix
00:13:46
¿Vale?
00:13:48
Y vamos a ver cómo funciona porque es muy interesante
00:13:49
Background attach, ¿vale?
00:13:52
Y vamos a poner, por ejemplo, la primera propiedad que es scroll
00:13:55
¿Vale?
00:13:58
Esta es la propiedad por defecto
00:14:00
Esto es importante apuntarlo
00:14:02
Por defecto
00:14:04
¿Vale?
00:14:06
Fijaros qué pasa
00:14:06
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?
00:14:07
Donde yo la había posicionado, yo había dicho que estuviera aquí en center top, ¿vale?
00:14:16
Entonces la imagen se queda donde está, arriba en el centro, ¿vale?
00:14:21
Y si yo bajo, se sigue quedando ahí.
00:14:26
Sin embargo, fijaros qué pasa si yo pongo fix, ¿vale?
00:14:28
Yo ahora mismo hago, cuando yo vaya a hacer scroll, fijaros lo que pasa.
00:14:33
hago scroll, pero la imagen
00:14:36
se viene conmigo, ¿vale?
00:14:38
siempre va conmigo
00:14:40
entonces digamos que yo así
00:14:41
no tendría la necesidad de, por ejemplo
00:14:44
en el tamaño, ¿vale?
00:14:46
cuando nosotros
00:14:49
cuando explicaba antes el concepto de cover
00:14:50
fijaros que en cover
00:14:52
la diferencia entre cover y contain, ¿vale?
00:14:53
es que contain
00:14:57
ocupaba todo lo visible
00:14:58
cover ocupaba todo lo visible, ¿vale?
00:15:01
sin embargo yo ahora si pongo contain
00:15:03
el contenido
00:15:05
Quiero decir, ¿vale? Pues fijaros que yo ahora podría desplazarme y estaría todo el rato viendo la página, ¿vale?
00:15:07
¿Ok? Pues estas son las opciones que tenéis para poner imágenes de fondo, ¿vale?
00:15:14
O poner colores de fondo en vuestras páginas web, ¿vale?
00:15:22
Bueno, pues espero que haya sido útil.
00:15:25
- Autor/es:
- Fernando Martínez Martí
- Subido por:
- Fernando M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 151
- Fecha:
- 22 de febrero de 2021 - 21:25
- Visibilidad:
- Público
- Centro:
- IES EL BURGO - IGNACIO ECHEVERRÍA
- Duración:
- 15′ 29″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 88.49 MBytes