CSS fondos saregune CC 2009
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..
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
imagen de fondo background-image: url(imagen) | none background-image: url(./img/logo.gif); background-image: url(http://algo.es/red.gif); 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.
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;
repeat
no-repeat
repeat-y
repeat-x
atachado de la imagen background-attachment: fixed | scroll background-attachment: scroll;
fixed
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;
right center no-repeat
combinar propiedades 1) con repeat da igual position 2) interesante con repeat-x, repeat-y
combinar repeat-y, position
combinar color e imagen
atajo: background background: color url(..) repeat attachment position * todas opcionales.
limitaciones - un solo fondo por elemento - no escalable
soluciones - añadir elementos <div> <div id=”esquina1”> <div id=”esquina4”>Elemento</div> </div>
background en CSS3 - multiples fondos - fondos SVG - fondos escalables y recortables.