1
00:00:01,070 --> 00:00:06,629
Uno de los elementos que más puede estropear una página es el fondo que se le pone a ella.

2
00:00:07,669 --> 00:00:12,089
Y por eso es un tema que es interesante para no caer en errores.

3
00:00:12,089 --> 00:00:15,589
Es fácil, es simple, pero merece la pena trabajarlo.

4
00:00:16,170 --> 00:00:21,089
Por ejemplo, podemos poner una imagen de fondo que se repite durante toda la página y el resultado es horripilante.

5
00:00:22,469 --> 00:00:27,789
O una imagen de este tipo en la cual puede gustarte o no, pero tiene cierta elegancia.

6
00:00:28,710 --> 00:00:30,850
Entonces la etiqueta se llama background.

7
00:00:31,070 --> 00:00:33,450
Y background tiene montones de elementos.

8
00:00:33,570 --> 00:00:38,409
Vemos aquí color, image size, repeat, position, attackman, clip, origin.

9
00:00:38,950 --> 00:00:39,750
Y podemos ver más.

10
00:00:40,469 --> 00:00:40,649
Bien.

11
00:00:41,049 --> 00:00:45,450
Vamos a poner, por ejemplo, que nuestro HTML sub background va a ser de color azul.

12
00:00:46,130 --> 00:00:48,329
Y un color azul flojito.

13
00:00:49,329 --> 00:00:53,530
Y va a tener como imagen esta URL.

14
00:00:53,729 --> 00:00:55,270
Caballo SVG.

15
00:00:55,369 --> 00:00:56,170
Este es un caballito.

16
00:00:56,850 --> 00:01:00,890
Entonces, si ponemos esto, pues simplemente él se va a poner a repetir esa imagen por todos lados.

17
00:01:01,070 --> 00:01:04,450
Y previamente habrá pintado el color azul.

18
00:01:05,310 --> 00:01:05,510
Bien.

19
00:01:06,530 --> 00:01:08,030
A lo mejor este caballo no resulta muy grande.

20
00:01:08,170 --> 00:01:12,829
Entonces podemos decirle de parte que empiece en la izquierda arriba.

21
00:01:13,329 --> 00:01:13,909
Aquí arriba.

22
00:01:14,609 --> 00:01:16,930
Y que aplique 100 píxeles a esta imagen.

23
00:01:17,150 --> 00:01:18,950
Simplemente ocupe 100 píxeles.

24
00:01:18,950 --> 00:01:22,150
Entonces vamos viendo como el caballito va corriendo.

25
00:01:22,569 --> 00:01:23,849
Y es un poco más pequeño.

26
00:01:24,609 --> 00:01:24,969
¿De acuerdo?

27
00:01:26,030 --> 00:01:26,329
Bueno.

28
00:01:27,269 --> 00:01:29,409
Una cuestión es que el orden sí importa bastante.

29
00:01:29,409 --> 00:01:36,709
Si yo digo background url gota, después que he definido el color, pues fíjense que está en blanco.

30
00:01:36,810 --> 00:01:45,129
Si yo defino el color después, primero pinto esa gota y después aplico el color que estamos obteniendo.

31
00:01:45,650 --> 00:01:48,329
Tenemos una serie de elementos que son de mucho interés.

32
00:01:48,489 --> 00:01:51,030
Uno de ellos es la url que queremos poner.

33
00:01:52,090 --> 00:01:58,469
Entonces, por ejemplo, aquí estamos diciendo que queremos poner ese fuego a la derecha, repitiéndolo en el eje i.

34
00:01:58,469 --> 00:02:01,189
En este eje, en el eje I

35
00:02:01,189 --> 00:02:06,609
Y, en general, quiero poner el tartán PNG

36
00:02:06,609 --> 00:02:09,650
Efectivamente, quiero poner esto de aquí

37
00:02:09,650 --> 00:02:10,210
¿De acuerdo?

38
00:02:10,949 --> 00:02:17,150
Entonces, bueno, esta es una imagen que tenemos así

39
00:02:17,150 --> 00:02:19,930
O podemos definir dos imágenes

40
00:02:19,930 --> 00:02:23,229
Una imagen que es esta del fuego y otra del tartán

41
00:02:23,229 --> 00:02:25,789
Y decirle que repita la primera en el eje I

42
00:02:25,789 --> 00:02:27,969
y la segunda simplemente que la repita

43
00:02:27,969 --> 00:02:29,330
durante todo el rato

44
00:02:29,330 --> 00:02:32,610
sería otra manera de ponerlo

45
00:02:32,610 --> 00:02:33,509
bien

46
00:02:33,509 --> 00:02:35,990
aquí vemos más ejemplos

47
00:02:35,990 --> 00:02:37,590
de cómo ir colocando la información

48
00:02:37,590 --> 00:02:39,949
otro de los elementos que tenemos

49
00:02:39,949 --> 00:02:41,449
es el color, background color

50
00:02:41,449 --> 00:02:43,330
entonces puedo poner cualquier color

51
00:02:43,330 --> 00:02:45,330
ya les recuerdo que si lo ponemos por adelantado

52
00:02:45,330 --> 00:02:47,849
ponemos en una sola etiqueta, hay que poner primero el color

53
00:02:47,849 --> 00:02:49,750
y después la url del dibujito

54
00:02:49,750 --> 00:02:50,750
correspondiente

55
00:02:50,750 --> 00:02:53,909
el background image, ya hemos trabajado con él

56
00:02:53,909 --> 00:02:55,150
no tenemos mayor problema

57
00:02:55,150 --> 00:03:00,750
y vamos a ir viendo otros ejemplos que puedan ser de interés

58
00:03:00,750 --> 00:03:04,409
pues por ejemplo podemos poner a nuestro HTML un background

59
00:03:04,409 --> 00:03:07,270
y a nuestro párrafo otro concreto

60
00:03:07,270 --> 00:03:12,349
entonces vemos aquí que estas franjas horizontales tan horribles

61
00:03:12,349 --> 00:03:17,750
corresponden, son todo el texto, corresponden a esta franja horizontal

62
00:03:17,750 --> 00:03:22,189
y estas rosadas que aparecen ahí son nuestras franjas verticales

63
00:03:22,189 --> 00:03:26,650
también podemos indicar el tamaño de cada uno de estos elementos

64
00:03:26,650 --> 00:03:28,909
entonces este es nuestro círculo

65
00:03:28,909 --> 00:03:32,430
y aquí podemos decir que nuestros círculos son de 50 por 50

66
00:03:32,430 --> 00:03:34,009
pues entonces así lo mostraremos

67
00:03:34,009 --> 00:03:37,949
es otra de las cuestiones que podemos ir definiendo

68
00:03:37,949 --> 00:03:42,569
bien, todos estos son características que si les interesa

69
00:03:42,569 --> 00:03:44,409
pues pueden ir mirando despacito

70
00:03:44,409 --> 00:03:45,990
un elemento importante es el repeat

71
00:03:45,990 --> 00:03:49,349
el no repeat, repeat x y repeat y

72
00:03:49,349 --> 00:04:04,909
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.

73
00:04:06,289 --> 00:04:12,189
Incluso si vamos a introducirle espacios o cuestiones por el estilo, también a gusto del consumidor.

74
00:04:12,189 --> 00:04:15,629
y la posición, yo puedo definir un elemento

75
00:04:15,629 --> 00:04:17,709
url verde jpg

76
00:04:17,709 --> 00:04:20,410
que esté en una posición determinada

77
00:04:20,410 --> 00:04:24,069
en el ancho al 98% está este div

78
00:04:24,069 --> 00:04:25,730
y su altura 10m

79
00:04:25,730 --> 00:04:27,810
y dentro de ello, dentro de este div

80
00:04:27,810 --> 00:04:30,290
digo que hay un background color light blue

81
00:04:30,290 --> 00:04:31,189
este colorcito

82
00:04:31,189 --> 00:04:36,149
esa imagen url que está verde jpg

83
00:04:36,149 --> 00:04:37,089
que es este cuadrado

84
00:04:37,089 --> 00:04:40,230
que lo hemos colocado a la derecha abajo

85
00:04:40,230 --> 00:04:41,750
y que no vamos a repetir

86
00:04:41,750 --> 00:04:45,250
exactamente como está ahí dibujada

87
00:04:45,250 --> 00:04:47,709
entonces todo esto hay que tener cuidado

88
00:04:47,709 --> 00:04:50,629
para ir viendo como voy colocando la información

89
00:04:50,629 --> 00:04:52,709
vamos a ver si hay algo más así

90
00:04:52,709 --> 00:04:54,329
que nos pueda resultar de interés

91
00:04:54,329 --> 00:04:56,170
más allá de ir colocando cosas

92
00:04:56,170 --> 00:04:59,850
por distintos elementos

93
00:04:59,850 --> 00:05:08,319
creo que a lo mejor

94
00:05:08,319 --> 00:05:12,800
a lo mejor el background

95
00:05:12,800 --> 00:05:16,000
A Taxman puede ser de interés

96
00:05:16,000 --> 00:05:17,439
Porque lo que estamos haciendo aquí

97
00:05:17,439 --> 00:05:19,259
Es posicionar esta imagen

98
00:05:19,259 --> 00:05:20,740
A la derecha arriba

99
00:05:20,740 --> 00:05:23,699
Sin repetición, pero estamos diciendo que haga scroll

100
00:05:23,699 --> 00:05:25,459
Entonces si nosotros bajamos

101
00:05:25,459 --> 00:05:27,839
Esto de aquí, pues no está haciendo nada

102
00:05:27,839 --> 00:05:29,040
¿Vale? ¿De acuerdo?

103
00:05:30,300 --> 00:05:31,839
La imagen simplemente

104
00:05:31,839 --> 00:05:34,079
Va acompañando a este elemento

105
00:05:34,079 --> 00:05:35,959
En el que está incluido

106
00:05:35,959 --> 00:05:37,540
Para arriba, ¿de acuerdo?

107
00:05:38,120 --> 00:05:39,699
Y en Fix lo que aparece

108
00:05:39,699 --> 00:05:40,879
Es fija

109
00:05:40,879 --> 00:05:46,519
Bien, pues creo que ya no sacamos más de los fondos