Maestro CSS, destripando estilos. Cap. 15: Propiedades de capa (background)
Escrito por Arzet el 02 - 04 - 2009 • Diseño web , Tutoriales
Background
La propiedad background nos permite definir las propiedades que afectarán al fondo del elemento sobre el que lo apliquemos.
Mediante esta propiedad podremos, por ejemplo, establecer el color de fondo de nuestra capa, una imagen de fondo para muestra tabla, un color para nuestra página, etc…
Como pasaba en el caso del border,background también es una propiedad muy versátil pues las propiedades que podemos aplicar a nuestro fondo son muy diversas. Pasemos a destripar un poquito más nuestro background:
- background-color: #ffcc00;
Nos permite definir un color plano de fondo para nuestra página. Su valor por defecto es transparent, de forma que si no definimos ningún background-color para nuestra capa, esta es transparente.Los valores permitidos son por tanto un nombre (red, blue, purple,…), hexadecimales, numéricos RGB, transparent o inherit. (para que herede el mismo color que la capa que lo contiene)
- background-image: url(imagenes/imagenA.jpg);
Mediante esta propiedad podemos establecer una imagen de fondo personalizada para nuestro elemento. Simplemente deberemos poner entre los paréntesis el nombre de la imagen que deseemos colocar.Es importante recordar que la ruta hacia nuestra imagen es relativa a la localización de nuestro archivo CSS y no a la página que estamos mostrando. Para poner un ejemplo:Imaginemos que nuestra css está en ateneupopular.com/css/estilos.css y la imagen en ateneupopular.com/img/imagenA.jpg. Si desde ateneupopular.com/index.php llamaramos directamente a la imagen pondríamos <img src=”img/imagenA.jpg”> pero si queremos que en esta misma página sobre una capa #capa1 se aplique esta imagen de fondo, en nuestra css estilos.css deberemos decir:
#capa1{ background-image: url(../img/imagenA.jpg)} para que la cargue correctamente.Hago especial hincapié en este punto pues en ocasiones puede llevar a confusión y a algún quebradero de cabeza no saber porque no se nos muestra una imagen correctamente.
- background-repeat: repeat;
Con esta instrucción podemos modificar el patrón de repetición de la imagen. Gracias a ello podemos conseguir con una sola imagen un mosaico gigante cuya trama se repite, como si se tratara de los motivos de Photoshop o de las típicas texturas repetitivas que podemos encontrar en la web para usar como imágenes de fondo en nuestras páginas.Los posibles valores para background-repeat son:
- repeat: valor por defecto y que genera una repetición de la imagen.
- repeat-x: repetirá la imagen pero solo horizontalmente y en ambas direcciones dentro del elemento sobre el que se aplica.
- repeat-y: repetiría la imagen pero verticalmente.
- no-repeat: solo printaría la imagen una sola vez, sin repetirla.
- background-position:left top;
Esta instrucción nos permite definir en que posición aparecerá la imagen. Si por ejemplo queremos que nuestra imagen salga a la derecha de nuestra capa en la parte superior definiremos la posición como background-position:right top;. si queremos que salga a la izquierda pero a 50 píxels de la parte superior el valor sería background-position:0 50px; (siempre empezamos a contar desde la parte superior izquierda de nuestra capa, indicando primero la distancia horizontal y después la vertical). Los valores que puede tomar pueden ser numéricos (100px), porcentajes (50%) o bien absolutos (left,top,right,bottom o center). Aclarar que solo para los valores absolutos el orden no importa pues background-position:left top; nos da el mismo resultado que background-position:top left; - background-attachment: fixed;
Mediante esta propiedad definiremos si nuestra imagen es una imagen fija que no debe moverse aunque hagamos scroll de la página o si debe hacerlo. Una de las mayores utilidades de esta propiedad reside en los backgrounds definidos para la etiqueta <body> que nos permitiría poner fondos no móviles sobre los que nuestra página parece flotar.Los posibles valores son:- scroll: valor por defecto del background-attatchment, la imagen si se mueve a la vez que lo hace el contenido.
- fixed: la imagen permanece fija aunque realicemos un scroll de página.
- background: url(img/imagenA.jpg) no-repeat fixed right top #ffcc00;
Que paliza si cada vez que tuviéramos que poner una imagen de background tuviéramos que recordar todas estas distintas propiedades!
Por suerte (al igual que ocurría también con la propiedad border) existe un bonito y sencillo método abreviado para ponerlo todo en uno, la propiedad background a secas.El orden a seguir lo he visto escrito de distintas maneras y de vosotros dependerá ponerlo como deseéis, pero la forma que veis aquí arriba es la que prefiero utilizar yo y que hasta la fecha… no me ha fallado. Primero defino la url de la imagen que quiero colocar, seguidamente si deseo repetirla (siempre que el valor que desee no sea un repeat que es el valor automático por defecto), después defino el attachment (siempre que sea distinto a scroll, pues es automático y por defecto), seguidamente defino la posición y finalmente un color de fondo.
Puede parecer un poco espeso, pero os aseguro que todo ello lo veréis mucho mejor en cuanto lo pongáis en práctica y creedme, no es ni difícil ni complicado y cuando lo hagáis os daréis cuenta que las posibilidades de control sobre las imágenes colocadas desde CSS de vuestras capas es realmente increíble y permite la realización de muchísimas filigranas. Hasta el próximo capítulo!
Loading ...
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D55163816.-%3B)
Muy buena explicación, pero me gustaria saber como se coloca un pattern como fondo, por medio de css, he visto en algunas paginas como un cuadro de 2px se convierte en todo un fondo, COMO LO HAGO???
Lee el articulo completo fernando, fijate que donde dice > background-repeat: repeat; Tenes la explicacion.
slds!
Siguiendo 15/15 capitulos del tutorial…muy bueno, gracias a todos.