Estilosccs2
Transcript of Estilosccs2
![Page 1: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/1.jpg)
Propiedades del fondo
![Page 2: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/2.jpg)
Establece el color de fondo de un
elemento. El fondo se extiende al borde
del elemento. Valor inicial: transparente.
{ background-color: #CCCC00 }
![Page 3: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/3.jpg)
En la ventada del css se modifica sin tener que ocupar la barra de propiedades ( se añade propiedad
![Page 4: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/4.jpg)
Se selecciona el formato de fondo color
![Page 5: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/5.jpg)
Aquí se selecciona el color
![Page 6: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/6.jpg)
Así queda con el formato aplicado
![Page 7: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/7.jpg)
Define una imagen como patrón de fondo. En conjunción con las otras propiedades de fondo, puede usarse como mosaico o repetirse en una direccción solamente. De uso recomendado con background-color, para las personas que deshabilitan la carga de imágenes.
BODY {background-image: url(bg41.gif);}
![Page 8: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/8.jpg)
Se añade la imagen
![Page 9: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/9.jpg)
Se selecciona el archivo deseado
![Page 10: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/10.jpg)
Así queda con la imagen no repeat
![Page 11: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/11.jpg)
Establede el estilo de repeticion para
una imagen de fondo. Los valores son:
repeat (mosaico), no-repeat, repeat-x
(horizontal), repeat-y (vertical). Por
defecto: repeat.
BODY { background-repeat: repeat-y }
![Page 12: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/12.jpg)
Se seleciona al costado repeat
![Page 13: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/13.jpg)
Vista de la imagen repeat ( es decir repetida )
![Page 14: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/14.jpg)
Define si la imagen de fondo sigue el
movimiento de desplazamiento de la
barra de scroll o si no. Los valores
posibles son: scroll y fixed.
BODY {background-attachment: fixed;}
![Page 15: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/15.jpg)
Se agrega attachment para dejar la imagen quieta en el formato
![Page 16: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/16.jpg)
Fixed= la imagen se queda quieta en el fondoScroll= la imagen se mueve en conjunto con la barra
![Page 17: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/17.jpg)
Establece el punto de comienzo de un
fondo, ya sea imagen o color. Si es un
color, el relleno del color continua desde
tal posición. Si es una imagen, la primera
imagen es ubicada en esa posición.
Valores: Position (x y) o (x% y%);
top, center, bottom, left, right.
BODY {background-position: top center;}
![Page 18: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/18.jpg)
Se selecciona la posición de la imagen de fondo ya sea horizontal, vertical, centrada
![Page 19: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/19.jpg)
Imagen con aplicación del formato deseado
![Page 20: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/20.jpg)
Abreviatura para las demás
propiedades. Los valores pueden ser
escritos en cualquier orden.
BODY {;} background: white url(bg41.gif)
fixed center
![Page 21: Estilosccs2](https://reader036.fdocuments.net/reader036/viewer/2022081404/559b69be1a28ab27188b45b6/html5/thumbnails/21.jpg)
Se puede escribir como se desee, el orden de los factores no altera el producto