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:
Uno de los elementos que más puede estropear una página es el fondo que se le pone a ella.
00:00:01
Y por eso es un tema que es interesante para no caer en errores.
00:00:07
Es fácil, es simple, pero merece la pena trabajarlo.
00:00:12
Por ejemplo, podemos poner una imagen de fondo que se repite durante toda la página y el resultado es horripilante.
00:00:16
O una imagen de este tipo en la cual puede gustarte o no, pero tiene cierta elegancia.
00:00:22
Entonces la etiqueta se llama background.
00:00:28
Y background tiene montones de elementos.
00:00:31
Vemos aquí color, image size, repeat, position, attackman, clip, origin.
00:00:33
Y podemos ver más.
00:00:38
Bien.
00:00:40
Vamos a poner, por ejemplo, que nuestro HTML sub background va a ser de color azul.
00:00:41
Y un color azul flojito.
00:00:46
Y va a tener como imagen esta URL.
00:00:49
Caballo SVG.
00:00:53
Este es un caballito.
00:00:55
Entonces, si ponemos esto, pues simplemente él se va a poner a repetir esa imagen por todos lados.
00:00:56
Y previamente habrá pintado el color azul.
00:01:01
Bien.
00:01:05
A lo mejor este caballo no resulta muy grande.
00:01:06
Entonces podemos decirle de parte que empiece en la izquierda arriba.
00:01:08
Aquí arriba.
00:01:13
Y que aplique 100 píxeles a esta imagen.
00:01:14
Simplemente ocupe 100 píxeles.
00:01:17
Entonces vamos viendo como el caballito va corriendo.
00:01:18
Y es un poco más pequeño.
00:01:22
¿De acuerdo?
00:01:24
Bueno.
00:01:26
Una cuestión es que el orden sí importa bastante.
00:01:27
Si yo digo background url gota, después que he definido el color, pues fíjense que está en blanco.
00:01:29
Si yo defino el color después, primero pinto esa gota y después aplico el color que estamos obteniendo.
00:01:36
Tenemos una serie de elementos que son de mucho interés.
00:01:45
Uno de ellos es la url que queremos poner.
00:01:48
Entonces, por ejemplo, aquí estamos diciendo que queremos poner ese fuego a la derecha, repitiéndolo en el eje i.
00:01:52
En este eje, en el eje I
00:01:58
Y, en general, quiero poner el tartán PNG
00:02:01
Efectivamente, quiero poner esto de aquí
00:02:06
¿De acuerdo?
00:02:09
Entonces, bueno, esta es una imagen que tenemos así
00:02:10
O podemos definir dos imágenes
00:02:17
Una imagen que es esta del fuego y otra del tartán
00:02:19
Y decirle que repita la primera en el eje I
00:02:23
y la segunda simplemente que la repita
00:02:25
durante todo el rato
00:02:27
sería otra manera de ponerlo
00:02:29
bien
00:02:32
aquí vemos más ejemplos
00:02:33
de cómo ir colocando la información
00:02:35
otro de los elementos que tenemos
00:02:37
es el color, background color
00:02:39
entonces puedo poner cualquier color
00:02:41
ya les recuerdo que si lo ponemos por adelantado
00:02:43
ponemos en una sola etiqueta, hay que poner primero el color
00:02:45
y después la url del dibujito
00:02:47
correspondiente
00:02:49
el background image, ya hemos trabajado con él
00:02:50
no tenemos mayor problema
00:02:53
y vamos a ir viendo otros ejemplos que puedan ser de interés
00:02:55
pues por ejemplo podemos poner a nuestro HTML un background
00:03:00
y a nuestro párrafo otro concreto
00:03:04
entonces vemos aquí que estas franjas horizontales tan horribles
00:03:07
corresponden, son todo el texto, corresponden a esta franja horizontal
00:03:12
y estas rosadas que aparecen ahí son nuestras franjas verticales
00:03:17
también podemos indicar el tamaño de cada uno de estos elementos
00:03:22
entonces este es nuestro círculo
00:03:26
y aquí podemos decir que nuestros círculos son de 50 por 50
00:03:28
pues entonces así lo mostraremos
00:03:32
es otra de las cuestiones que podemos ir definiendo
00:03:34
bien, todos estos son características que si les interesa
00:03:37
pues pueden ir mirando despacito
00:03:42
un elemento importante es el repeat
00:03:44
el no repeat, repeat x y repeat y
00:03:45
Y esto indica cómo la imagen se va o simplemente a no repetir, como este caso, o la vamos a repetir en el eje X, horizontalmente, en el eje Y, verticalmente, o en todas las direcciones, tanto X como Y.
00:03:49
Incluso si vamos a introducirle espacios o cuestiones por el estilo, también a gusto del consumidor.
00:04:06
y la posición, yo puedo definir un elemento
00:04:12
url verde jpg
00:04:15
que esté en una posición determinada
00:04:17
en el ancho al 98% está este div
00:04:20
y su altura 10m
00:04:24
y dentro de ello, dentro de este div
00:04:25
digo que hay un background color light blue
00:04:27
este colorcito
00:04:30
esa imagen url que está verde jpg
00:04:31
que es este cuadrado
00:04:36
que lo hemos colocado a la derecha abajo
00:04:37
y que no vamos a repetir
00:04:40
exactamente como está ahí dibujada
00:04:41
entonces todo esto hay que tener cuidado
00:04:45
para ir viendo como voy colocando la información
00:04:47
vamos a ver si hay algo más así
00:04:50
que nos pueda resultar de interés
00:04:52
más allá de ir colocando cosas
00:04:54
por distintos elementos
00:04:56
creo que a lo mejor
00:04:59
a lo mejor el background
00:05:08
A Taxman puede ser de interés
00:05:12
Porque lo que estamos haciendo aquí
00:05:16
Es posicionar esta imagen
00:05:17
A la derecha arriba
00:05:19
Sin repetición, pero estamos diciendo que haga scroll
00:05:20
Entonces si nosotros bajamos
00:05:23
Esto de aquí, pues no está haciendo nada
00:05:25
¿Vale? ¿De acuerdo?
00:05:27
La imagen simplemente
00:05:30
Va acompañando a este elemento
00:05:31
En el que está incluido
00:05:34
Para arriba, ¿de acuerdo?
00:05:35
Y en Fix lo que aparece
00:05:38
Es fija
00:05:39
Bien, pues creo que ya no sacamos más de los fondos
00:05:40
- Idioma/s:
- Autor/es:
- Amadeo Mora
- Subido por:
- Amadeo M.
- Licencia:
- Dominio público
- Visualizaciones:
- 102
- Fecha:
- 29 de diciembre de 2020 - 10:01
- Visibilidad:
- Público
- Centro:
- IES CLARA DEL REY
- Duración:
- 05′ 48″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1364x768 píxeles
- Tamaño:
- 51.92 MBytes
