CSS1 | background-attachment - Fijación del fondo

La propiedad background-attachment determina si una imagen de fondo es fija o se desplaza con el resto de la página cuando esta se desplaza (utilizando las barras de desplazamiento del navegador). 
La propiedad es compatible con los principales navegadores, aunque el valor de "inherit" no es compatible con Internet Explorer 7 y versiones anteriores. IE8 requiere un DOCTYPE!. IE9  para soportar "inherit". La sintaxis es la siguiente:

background-attachment:value;

Donde "value" puede ser cualquiera de las palabras claves siguientes:

• scroll: la imagen de fondo se desplaza con el resto de la página 
• fixed: la imagen de fondo está fija
• inherit: se hereda del elemento padre

Por defecto el valor de background-attachment es "scroll", es decir que la imagen de fondo se desplazara con el bloque:

scroll

Mencionamos anteriormente que para que la imagen de fondo no se desplace al utilizar las barras usamos la palabra clave "fixed":

fixed

Espero que les haya sido de utilidad...
Hasta la próxima!!!

CSS1 | Background-image

La propiedad background-image especifica una imagen para utilizarla como fondo de un elemento. la sintaxis es la siguiente:

background-image: url("ruta_de_imagen");

De manera predeterminada, la imagen se repite hasta cubrir todo el fondo del elemento.

veamos un ejemplo: 

Background-image: {url('ruta_de_imagen/nuestra_imagen.png');

la imagen anterior corresponde a un div al que se le ha aplicado una imagen de fondo, (he puesto un borde fino para mostrar los limites del div). Es conveniente, indicar siempre un color de fondo ya que si la imagen no estuviera disponible se mostraría el color de fondo.


Junto a background-image tenemos otras propiedades básicas que configuran detalles como repetición de fondo con background-repeat o posición del fondo con background-position, background-attachment y la implementación CSS3 nos ha traído nuevas propiedades como  background-size, background-origin o background-clip, de todos modos como en la mayoría (sino todas) de las propiedades CSS, se permite una forma abreviada para configurar en una sola línea todos estos parámetros, por medio de la propiedad background, a secas. 


Espero que les haya sido de utilidad...
Hasta la próxima!!!

CSS1 | Background-color

En en artículo anterior hemos visto como definir todos los parámetros del fondo en una sola línea con background, veamos las propiedades de manera independiente, en este artículo haremos un repaso a background-color. 


La propiedad background-color, establece el color de fondo de un elemento. la sintaxis es la siguiente:

background-color: value;

Las propiedades de fondo no se heredan, pero debido a que por defecto el valor inicial de background-color es transparente, los elementos que no tengan un valor de background-color mostraran el fondo de los elementos padre. 

Puede parecer que no tenga relevancia esta acotación, pero no podemos confundirnos, que podamos ver un elemento "hijo" con el fondo del elemento "padre" es simplemente por la opacidad predeterminada de su fondo y no por herencia. Si queremos que el fondo sea una propiedad heredada se utiliza la palabra clave "inherit"
la propiedad se complementa muy bien con border-radius, no hay ningún problema de la combinación de ambas, el relleno se adapta perfectamente a los bordes redondeados.

Background-color, simplifica mucho nuestro trabajo ya que puede aplicarse a diversos elementos, un párrafo, un titulo, etc

<h1> con color de fondo y border-radius

El valor del color, generalmente se define por un valor HEX ( "# FF0000"), un valor RGB  ("rgb (255,0,0)") o un nombre de color ( "red", "blue", etc).
La palabra clave "transparent" puede usarse para indicar que el fondo será transparente aunque por defecto ya lo es y la palabra clave "inherit" se utiliza para heredar el fondo del elemento padre, de todos modos debemos tener en cuenta que Internet Explorer en muchas de sus versiones no soporta esta configuración (IE8 requieres un !DOCTYPE. IE9 para soportar "inherit").Si quieres mas información sobre los colores en css, te invito que les eches un ojo a la publicación: CSS | El color en CSS y sus valores, si quieres información sobre la propiedad abreviada: CSS1 | Background - Trabajando con el fondo




Espero que les haya sido de utilidad...
Hasta la próxima!!!

CSS1 | Background - Trabajando con el fondo

Css nos permite configurar varias características del fondo en una sola propiedad: background.La sintaxis es la siguiente:

body {background:color url('image') repeat left top;}

Cuando se utiliza la propiedad abreviada, el orden de los valores es el siguiente:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Veamos un ejemplo de la propiedad en su estado abreviado:

La imagen de fondo que he utilizado es un png transparente:

En los siguientes artículos veremos cada valor de manera independiente. 
Hasta la próxima!