learn-css/02.background.css at main · cesarlpb/learn-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* Background */

.bg-gray {
  background-color: gray;
  padding: 10px;
  text-align: center;
  color: white;
}

.bg-gray-90 {
  background-color: gray;
  padding: 10px;
  text-align: center;
  color: white;
  opacity: 0.9;
}

.bg-gray-50 {
  background-color: gray;
  padding: 10px;
  text-align: center;
  color: white;
  opacity: 0.5;
}

.bg-gray-25 {
  background-color: gray;
  padding: 10px;
  text-align: center;
  color: white;
  opacity: 0.25;
}

/* Nota: opacity hace que todo el elemento sea más transparente */


.bg-gray-rgba {
  background-color: gray;
  padding: 10px;
  text-align: center;
  color: white;
  opacity: 0.5;
}

.bg-css, .bg-css-repeat, .bg-css-fixed {
  background-image: url("bg-css.webp");

  /* Controlamos el tamaño de la imagen: */
  height: 300px;
  /* El ancho escalado sería: */
  /* width: 480px; */

  /* Escalamos al tamaño del elemento: */
  background-size: cover;
  /* Movemos la imagen: */
  background-position: center center;
  /* Colocamos p en la parte baja del div: */
  display: flex;
  align-items: end;
  justify-content: center;
}
.bg-css > p, .bg-css-repeat > p, .bg-css-fixed > p {
  text-align: center;
  color: white;
  text-transform: capitalize;
  text-decoration: underline;
  /* Solo para maquetación: */
  /* border: 1px solid black; */
}

/* Estilos específicos de .bg-css-repeat: */

.bg-css-repeat {
  background-image: url("css-small.png");
  background-size:contain;
  /* Repeat solo en eje horizontal: */
  background-repeat:repeat-x;
}

/* bg repeat */

.bg-css-repeat > p, .bg-css-fixed > p {
  color: rgb(255, 255, 255);

  /* Este background hace que el contraste del color de letra con la imagen sea mejor, le añado opacidad para que el color no sea tan fuerte: */
  background-color: rgba(0, 0, 0, 0.65);

  text-decoration: none;
  padding: 20px;
  padding-top: 25px;

  /* Nota: para que se respete el alto o ancho que colocamos a pesar del padding, se puede usar esta opción: */
  box-sizing: border-box;
  /* ------------------ */

  margin-bottom: 0;
  width: 100%;
  height: 100px;

  /* Cambio la altura de línea para centrar mejor en vertical el texto del p: */
  line-height: 40px;
}

.bg-css-repeat a, .bg-css-fixed a {
  border: none;
  color: skyblue;
}

/**********
  bg fixed
 *********/

 .bg-css-fixed {
  height: 1000px;
  background-position: right bottom;
  /* Esta propiedad es la base del efecto de parallax: */
  /* https://blog.hubspot.es/website/efecto-parallax */
  /* Codepen:
   - https://codepen.io/olgavegh/pen/jORxEzG
   - https://codepen.io/tag/parallax
  */
  background-attachment: fixed;
  align-items: center;
 }

 .bg-css-atajo {
  height: 1000px;
  background-color: #ffffff;
  background-image: url("bg-css.webp");
  background-repeat: no-repeat;
  background-position: center center;
  /* Equivale a: */
  background: #ffffff url("bg-css.webp") no-repeat center center;
 }