Clase 4 - Background Color e Imagen de Fondo

Background e imagen
de fondo en CSS
!"#$%&'(')*(+,-"#./' +#0#"
!" #$%#&'("( )"*+,$%-.(/*%0%$ .% #'$1&2' '32")0'*'$ '0 *%0%$ (' 4%.(% #"$" -. '0'1'.2% 567!8 3&1#0'1'.2' ('*0"$"1%3 9 '. 3-
:"0%$ *%0%*"1%3 '0 *%0%$ ('3'"(%;
!"#$%&' ("%" )$#$%&' *& +$,*$
<. *"3% ('0 *%0%$ (' 4%.(%8 '0 :"0%$ '3 -. *%0%$ =-' #-'(' #$'3'.2"$3' '. 0%3 4%$1"2%3 =-' :'.&1%3 *%.%*&'.(% ('3(' ".2'$&%$'3
0'**&%.'3;
Ya hemos revisado el tema de textos y estilos para crear títulos y contenido

con estructuras variadas, ahora vamos a revisar como podemos darle vida al
fondo de nuestra pagina web.
!-"#".%"/)#"!&01 '0>.%1)$'>('0>*%0%$>'.>&.,0'3;
!2&3"*&)45"#01 '0>*%0%$>$'#$'3'.2"(%>#%$>-.>?>
3',-&(%>('>@>*"$"*2'$'3>"04".-1A$&*%3>=-'>
$'#$'3'.2".>-.>*%0%$>'3#'*B4&*%;
!67801 2"1)&A.>'3>:C0&(%>'0>:"0%$>'.>DEF>G$%H%8>
:'$('8>"I-0J
HTML CSS
Tenemos un color azul para el fondo y un color diferente para cada uno de los
textos dentro del ejemplo, con esto podemos crear espacios dentro de la pagina con
mas personalidad.
Si deseamos colocar un color de fondo a toda la página web, tendríamos simplemente
que escribir en la etiqueta <body> y establecer la propiedad background-color con
el valor del color que queramos, seria: body {background-color: yellow;}
Generar un fondo con color diferente para cada sección de nuestra pagina, genera una
instrucción con su nombre particular. Vamos a revisar otros espacios a os cuales les
podemos cambiar el color de fondo.
(%$(4&*"*/.")9:%$;,*145":&
!" #$%#&'("( )"*+,$%-.(/&1",' .%3 #'$1&2' '32")0'*'$ -." &1",'. (' 4%.(% " -. '0'1'.2%8 '3 2". 3&1#0' *%1%
('*0"$"$ 0" #$%#&'("( 9 '. 3- :"0%$ '32")0'*'$ *-C0 3'$C 0" &1",'. =-' "#"$'I*";
<0 :"0%$ (' 0" #$%#&'("( .")9:%$;,*1)$#$% 2&'.' "0,% '.
'3#'*&"08 2$"2" (' &.(&*"$ 0" &1",'. (' 0" 3&,-&'.2' 1".'$"K
;%#<="%)>4!$ $ ?6@=AB
L& 0" &1",'. '32C '. 0" 1&31" *"$#'2" ('0 (%*-1'.2% 2CD@8
'.2%.*'3 3' *%0%*" '0 .%1)$' ('0 "$*M&:% *%. 3- $'3#'*2&:" HTML
'N2'.3&O.8 '. *"3% (' =-' '0 "$*M&:% '32' '. %2$" (&$'**&O.8
'.2%.*'3 &.(&*"1%3 '3" (&$'**&O. '. 0-,"$ (' *%0%*"$ 3%0% '0
.%1)$';
PM%$" :"1%3 " *$'"$ -. *%.2'.'(%$ *%. ".*M% 1CN&1% ('

EFF(3 9 "02-$" 1B.&1" (' GEF(38 ('.2$% (' '32' *%.2'.'(%$
&$C -. #C$$"4% *%. 4%.(% "1"$&00% *0"$%Q #%$ %2$% 0"(% 2'.'1%3
-." &1",'. (' HFF3IHH(38 '0 *-"0 3'$C #-'32% *%1% 4-.(%
('0 *%.2'.'(%$;
CSS
R%2' =-' 0" &1",'. '1#&'I" " $'#$%(-*&$3' 2".2%
M%$&I%.2"0 9 :'$2&*"01'.2' ('3(' 0" '3=-&."
3-#'$&%$ &I=-&'$(" ('0 )0%=-'8 M"32" *-)$&$ 2%(% '0
)0%=-' *%. )#"''J=+$,*$45:S8 '32' M'*M% %*-$$'
#%$ ('4'*2%;
T%.'$ &1",'. (' 4%.(% " 2%(" 0" #C,&." U')8 '3
2". 3'.*&00% *%1% "#-.2"$ " 0" '2&=-'2" )%(9 (' 0"
#C,&.";
!" #$%#&'("( &1",'. (' 4%.(% #-'(' 3'$
M'$'("(" " 0%3 '0'1'.2%3 M&H%8 #"$" '00%
3&1#0'1'.2' '32")0'*'1%3 '0 :"0%$ ('
)"*+,$%-.(/&1",' ('0 M&H% '. &.M'$&2;
K"%4"' 45L:&,&' *& +$,*$ &, MNN
<3 #%3&)0' '32")0'*'$ 1C3 (' -." &1",'. *%1% 4%.(%8 '0 #$&1'$% #$':"0'*'$C8 3& '. *"3% .% 'N&32' '.2%.*'3 '0 3',-.(% 9 "3B
3-*'3&:"1'.2'Q #"$" '3#'*&4&*"$ 1C3 (' -." &1",'.8 3&1#0'1'.2' 3'#"$" *%. *%1"3 0"3 -$08 '. '0 :"0%$8 #%$ 'H'1#0%K
-$0GV)%1)&00%;#.,SJ8-$0GSM22#3KWW&1",'3;#'N'03;*%1W#M%2%3WXYYZY[W#'N'03/#M%2%/XYYZY[;H#',\*3]3$,)^(0]#'N'03/#&N")"9/
XYYZY[;H#,^41]H#,SJQ
!"#!$%&'& (')*+"#,-&."%!%'/
La propiedad background-repeat nos permite determinar la dirección en que se repite

la imagen de fondo o si se desea que no se repita, para eso haremos uso de los
siguientes valores:
0'1#"%2 &% 1' !"#!$%&'& (')*+"#,-&."%!%'/
O %&(&"P13;/ 3%0% $'#&2' '. (&$'**&O. N - M%$&I%.2"01'.2';
_ %&(&"P1Q01 3%0% $'#&2' '. (&$'**&O. 9 % :'$2&*"01'.2';
O ,$1%&(&"P01 .% 3' $'#&2' '. .&.,-." (&$'**&O.;
32/'(1%)%" %1 4'1#" ' $-5%"$/ 65%"%&'"7
!" #$%#&'("( )"*+,$%-.(/$'#'"2 #-'(' 3'$ M'$'("(" " 0%3 '0'1'.2%3 M&H% 3&'1#$' 9 *-".(% 3' '32")0'*' '0 :"0%$ M'$'("$ '.
(&*M%3 '0'1'.2%3 M&H%;
T%$ 'H'1#0% 3& '32")0'*'1%3 =-' 0" &1",'. (' 4%.(% 3' $'#&2'
'. -." (&$'**&O. M%$&I%.2"08 #"$" '0 *-'$#% (' 0" #C,&." U')
G)%(9J 9 #%$ %2$% 0"(% *%.2"1%3 *%. -. )0%=-' (' *%.2'.&(%
*%. )#"''J=>4R$= ('.2$% ('0 *-'$#% 9 0' &.(&*"1%3 "0 )0%=-'
>4R$ *%1% '0 M'$'(" '0 '32&0% (' $'#'2&$ 4%.(% -3".(% '0 :"0%$
4,>&%4P8 '.2%.*'3 '3' )0%=-' 2"1)&A. 2'.($C 0" &1",'. ('
4%.(% $'#&2&'.(% '. 0" 1&31" (&$'**&O. =-' '0 ("*%& <.$*QA
HTML
CSS
Podemos observar que el elemento con class="hijo" obedece al estilo del elemento
padre, repite la imagen de fondo solo en dirección horizontal.
!"#!$%&'& 8')*+"#,-&.'//')59%-/
!" #$%#&'("( )"*+,$%-.(/"22"*M1'.2 .%3 #'$1&2' ('4&.&$ 3& 0" &1",'. (' 4%.(% 3' =-'(" 4&H" % 3' 1-':' '. 0" #".2"00"
*-".(% '0 -3-"$&% 3' ('3#0"*' 3%)$' '00" % M"," 3*$%00Q #"$" '00% M"$'1%3 -3% (' 0%3 :"0%$'3 =-' *%$$'3#%.('.;
!"#$%&' ("%" )"*+,%$-./0"11"*23&.1
')%$##01 M"*' =-' 0" &1",'. (' 4%.(% 3' 1-':" '. 0" #".2"00" H-.2% *%. '0 '0'1'.2% =-' 0% *%.2&'.';
+43&*01 0" &1",'. (' 4%.(% =-'(" 4&H" 1&'.2$"3 '0 )0%=-' 3' 1-':' *%. '0 $'32% ('0 *%.2'.&(%;
El valor de background-attachment también puede ser heredado de un elemento

padre a un elemento hijo, para ello se emplea inherit como valor para elemento
hijo.
HTML
CSS
<0 *O(&,% =-' 2'.'1%3 M"$C =-' '0 #$&1'$ )0%=-' 2'.," -." &1",'. (' 4%.(% =-' 3' 1-':' H-.2% *%. '0 )0%=-' =-' 0% *%.2&'.'
9 '0 3',-.(% *"3% M"$C =-' 3' =-'(' 4&H" M"32" =-' '0 )0%=-' =-' 0% *%.2&'.' M"9" 2'$1&."(% (' #"3"$ *-".(% '0 -3-"$&% 3'
('3#0"*' #%$ 0" #".2"00";
T"$" *%1#$%)"$ '0 $'3-02"(% 2' ('H% -." #'=-'`" 2"$'" 9 '3 '0 3&,-&'.2'K '32")0'*' (&1'.3&%.'3 "('*-"("3 " 0%3 )0%=-'38 *$'"
#C$$"4%3 9 0%3 '0'1'.2%3 =-' ('3''3 '. *"(" )0%=-'8 (' 2"0 1".'$" =-' 3'" .'*'3"$&% -. ('3#0"I"1&'.2% '. 0" #".2"00"8
'32")0'*' &1C,'.'3 (' 4%.(% 9 #$-')" =-' -.% 3' 1-':' 9 0" %2$" =-'(" 4&H";
Estas son las propiedades básicas para manejar el fondo de la pagina web y el
fondo de los textos, o con uso de imágenes. Solo debemos tener cuidado con el
tipo de imágenes y colores que vamos a utilizar, para facilitar la
visualización de la pagina web.
1./+%#/&2)&/)344
En CSS también tenemos la oportunidad de utilizar funciones, para facilitar el

proceso de diseño de nuestra pagina web, y nos ayuda a identificar características de
forma mas fácil.
!"3 4-.*&%.'3 aLL 3' -2&0&I". *%1% :"0%$ (' "0,-."3 #$%#&'("('3; T%$ 'H'1#0% 0" 4-.*&O. >'#<A 3' -2&0&I" #"$" ('4&.&$ '0
)$#$% -2&0&I"(% *%1% :"0%$ (' "0,-."3 #$%#&'("('3 *%1%8 .")9:%$;,*1)$#$%S .$%*&%1)$#$%S &P)T
0'1#"%2 )'1),1'&#2: ;,-)$<- )'1)67
<3 #%3&)0' =-' '. "0,-."3 %*"3&%.'3 .'*'3&2'1%3 &.(&*"$ :"0%$'3 #$'*"0*-0"(%3 #%$ '0 .":',"(%$; T%$ 'H'1#0%8 0" 3-1" (' (%3
:"0%$'3 =-' ('3*%.%*'1%3 ".2'3 (' &.&*&"$ '0 #$%*'3%8 % .% 3")'1%3 'N"*2"1'.2' *-".2% 3-1".8 #'$% =-' '0 .":',"(%$ 3&
(')'$B" *%.%*'$;
<32% '3 #%3&)0' M"*'$0% *%. 0" 4-.*&O. )"#)<A (' MNN8 *%1% :"1%3 " :'$K
Como podemos ver, se pueden usar operaciones como sumas ( + ), restas (
- ), multiplicaciones ( * ) o divisiones ( / ) que utilicen alguna de
las unidades soportadas por CSS, como por ejemplo, números, dimensiones,
porcentajes, tiempos, ángulos, etc...
Debemos tener en cuenta que también se pueden anidar funciones calc()

una dentro de otra. Resulta especialmente interesante su utilización
junto a variables a otro tipo de variables.
Valor mínimo: Función min()
En algunas ocasiones, necesitaremos que en una propiedad se aplique un valor de varias posibilidades. De esas
posibilidades, no sabremos exactamente cuál necesitamos, pero si sabremos una de sus cualidades: es la más
pequeña, en otras palabras, necesitamos el valor mínimo.
CSS permite realizar esto utilizando la función min() que nos permite elegir el valor más pequeño de 2 o más
posibilidades aplicadas por parámetro:
!"#$ %&'()%*+% ,- .(/#0 /1 !""#$2 "(13&*1 4 ),%-/$ 1' !%& /1' 1'131-#$ #'()* "1%
35" 6*%-/1 /1 !""#$7 8$/$ 1"#1 )5'),'$2 &,1/1 *1%'(9%*"1 /1"/1 :;; "( "<'$ "1
,#('(9% 1=)',"(>%31-#1 &%*% 1"#% #%*1%7
0'1#" 9=>$9#: ;,-)$<- 9'>67

b' 0" 1&31" 4%$1" =-' 2'.'1%3 -." 4-.*&O. 1&.GJ8 2"1)&A. 2'.'1%3 -." 4-.*&O. 5"3<A0 a%1% #%('1%3 &1",&."$8 (&*M"
4-.*&O. 3&$:' #"$" 0% %#-'32% (' 0" 4-.*&O. 54,<AU %)2'.'$ '0 :"0%$ 1CN&1% '.2$' :"$&"3 #%3&)&0&("('3;
c"1%3 " -2&0&I"$ 1C3 (' [ #"$C1'2$%3 G"1)"3 4-.*&%.'3 #'$1&2'. 1d02&#0'3 :"0%$'38 .% .'*'3"$&"1'.2' (%3JK
e)3'$:" =-' *%1% 3' :' '. '0 'H'1#0% '. HFF(3 1 IFF(38 2".2% '. 54,<A *%1% '. 5"3<A8 #-'('3 $'"0&I"$
%#'$"*&%.'3 (&$'*2"1'.2' '. 3- &.2'$&%$ 3&. .'*'3&("( (' -2&0&I"$ 0" 4-.*&O. )"#)<A;
0'1#" &%1 '/"$(,/#: ;,-)$<- '//"67
P-.=-' .% '3 (' ,A.'$% 1"2'1C2&*% *%1% 0"3 ".2'$&%$'38 'N&32' 0" 4-.*&O. aLL "22$GJ8 =-' '3 "0,% 1C3 #"$2&*-0"$8 9" =-'
#'$1&2' %)2'.'$ '0 :"0%$ (' -. "2$&)-2% 567! 9 -2&0&I"$0% ('3(' aLL8 ,'.'$"01'.2' #"$" 2'1"3 (' ('*%$"*&O.;
!">4-.*&O.>"22$GJ8>3'>'.*"$,"$">('>(':%0:'$>-.">*"('.">('>2'N2%>$'#$'3'.2".(%>'0>:"0%$>('>-.>"2$&)-2%;

Clase 4 - Background Color e Imagen de Fondo

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Clase 4 - Background Color e Imagen de Fondo

Uploaded by

Copyright:

Available Formats

Background e imagen

!"#$%&' ("%" )$#$%&' & +$,$

Ya hemos revisado el tema de textos y estilos para crear títulos y contenido

PM%$" :"1%3 " $'"$ -. %.2'.'(%$ %. ".M% 1CN&1% ('

La propiedad background-repeat nos permite determinar la dirección en que se repite

32/'(1%)%" %1 4'1#" ' $-5%"$/ 65%"%&'"7

!"#$%&' ("%" )"+,%$-./0"11"23&.1

El valor de background-attachment también puede ser heredado de un elemento

En CSS también tenemos la oportunidad de utilizar funciones, para facilitar el

Debemos tener en cuenta que también se pueden anidar funciones calc()

0'1#" 9=>$9#: ;,-)$<- 9'>67

You might also like