CSS fondos saregune CC 2009.

Presentación del tema: "CSS fondos saregune CC 2009."— Transcripción de la presentación:

1 CSS fondos saregune CC 2009

2 Imágenes contra estilo
No usar nunca <img> para imágenes decorativas. <img> debe usarse en exclusiva para imágenes informativas: fotos de personas, fotos de sedes, logos, fotos de una noticia..

3 color de fondo background-color: <color> | transparent
background-color: #fff; background-color: red; background-color: transparent; procura definir tanto el color de fondo como el color

4 imagen de fondo background-image: url(imagen) | none
background-image: url(./img/logo.gif); background-image: url( background-image: url(./irudiak/boton.gif) Image no lleva comillas a menos que contenga un espacio. No hay espacio entre url y el paréntesis.

5 repetición imagen de fondo
background-repeat: no-repeat | repeat | repeat-x | repeat-y background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y;

6 repeat

7 no-repeat

8 repeat-y

9 repeat-x

10 atachado de la imagen background-attachment: fixed | scroll
background-attachment: scroll;

11 fixed

12 posición de la imagen background-position: <x> <y>
x: left | center | right | longitud | porcentaje; y: top | bottom | center | longitud | porcentaje; background-position: center top; background-position: 10px 200px; background-position: 50% top; Si se mezclan literales con números, estos siempre van primero: SI 10px center NO center 10px;

13 right center no-repeat

14 combinar propiedades 1) con repeat da igual position
2) interesante con repeat-x, repeat-y

15 combinar repeat-y, position

16 combinar color e imagen

17 atajo: background background: color url(..) repeat attachment position
* todas opcionales.

18 limitaciones - un solo fondo por elemento - no escalable

19 soluciones - añadir elementos <div> <div id=”esquina1”>
<div id=”esquina4”>Elemento</div> </div>

20 background en CSS3 - multiples fondos - fondos SVG
- fondos escalables y recortables.