III-Propiedades de Color y Fondo

PROPIEDADES DE COLOR Y FONDO

Son Las que definen los colores y/o imágenes que se usarán en un objeto, como el color del texto o la imagen de fondo de un párrafo, de una caja o de todo el blog.

Antes de empezar con las propiedades, comentarte que el color puedes especificarlo de varias maneras. Nominal, es decir, por el nombre . También puedes hacerlo por el sistema hexagesima ( seis números y/o letras precedidos del signo # ). En web encontrarás muchas páginas que te permitirán elegir colores y obtener su código, como por ejemplo esta. También hay programas específicos para esto como el Huey . Hay otros sistemas, pero el blog utiliza básicamente estos dos.

 

1-    color: Indica el color del elemento al que se aplica.

         Vej  color:#555555;

   2-background-color: Asigna el color de fondo del elemento al que se aplica.

                 Vej  background:#ffffff

 

3-background-image: Asigna una imagen de fondo al elemento al que se aplica.

              Vej  background: url('http://admin.blogs.ya.com/img/imgtemplates/blog3_img4.gif')

   4- background-repeat: Indica, en el caso de que una imagen de fondo sea menor que el área a cubrir, la forma en que se repetirá esta imagen. Puede tomar varios valores:

repeat: La imagen se repetirá tanto en horizontal como en vertical.
repeat-x: La imagen se repetirá solo en horizontal.
repeat-y: La imagen se repetirá solo en vertical.
no-repeat: La imagen no se repetirá.

 

   5-background-attachment: Indica si una imagen de fondo permanecerá fija al hacer un scroll  o no. Por tanto puede tomar dos valores:

    scroll: La imagen se desplazará al hacer un scroll.
    fixed: La imagen no se desplazará al hacer un scroll. Con esto creamos un fondo fijo como el que tengo yo en mi blog.

    Por defecto el valor es fixed, pero en el blog no es así.

 

**Nota** Estas cinco características se pueden reunir.

 

     V.eje  background:#ffffff url('http://admin.blogs.ya.com/img/imgtemplates/blog3_img4.gif') repeat-x fixed

   Podeis optar por especificar que es lo que estais definiendo (lo recomiendo). Entonces debeis separar cada característica por un ; .

 

    V. eje  Background-color:#ffffff;

              Background-image: url(‘http://la direccion de la imagen’);

              Background-repeat: no-repeat;

              Background-attachment: fixed;

   6-background-position: Define la posición en la que se insertará una imagen de fondo

  puede adoptar una de las siguientes formas:
     x%: Donde "x" es un porcentaje que representa la posición horizontal de la imagen con respecto al ancho del objeto al que se aplica.
     x: Donde "x" es la distancia, en alguna de las unidades CSS, al borde izquierdo del objeto al que se aplica.
     left: La imagen se pegará a la izquierda.
     center: La imagen se colocará en el centro.
     right: La imagen se colocará a la derecha.

puede adoptar una de las siguientes formas:
     x%: Donde "x" es un porcentaje que representa la posición vertical de la imagen con respecto a la altura del objeto al que se aplica.
     x: Donde "x" es la distancia, en alguna de las unidades CSS, al borde superior del objeto al que se aplica.
     top: La imagen se colocará en el borde superior.
     center: La imagen se colocará en el centro.
     bottom: La imagen se colocará abajo.

Valor por defecto: 0% 0%

 

**NOTA** Esta última característica solo la he visto en el blog en el título de los post:

                  .posttitle {

                   background-position: left 50%;

  Significa que el título se alinea a la izquierda y ocupa un 50% del ancho del post.