JMiur [E]

Las propiedades CSS son las que nos permiten personalizar los sitios, darles ciertas características especiales, ajustar cada detalle de una página web.

Por lo general, las utilizamos incluyéndolas en una hoja de estilo externa (un archivo de extensión CSS), dentro de una etiqueta <STYLE> </STYLE> (o <b:skin> </b:skin> en Blogger) o como parámetro en una etiqueta usando style="".

A su vez, todas esas propiedades pueden establecerse o modificarse mediante JavaScript lo que las hace muy flexibles ya que podemos manejarlas a nuestro antojo. Un ejemplo que todos hemos visto es el de mostrar y ocultar elementos al hacer click; ¿cómo se hace eso?, cambiando las propiedades CSS.

Esta, es el primero de una serie de posts donde se mostrará, hasta donde sea posible, cuáles son las propiedades que podemos utilizar y cómo hacerlo.

Empezamos con una de las más usuales, la propiedad background.

La propiedad background establece todas y cada una de las propiedades que afectan al fondo de un elemento, al mismo tiempo. Es decir, la usamos para evitar escribir cada una de ellas por separado:
background-color | background-image | background-repeat | background-attachment | background-position

sintaxis en HTML
elemento {background: valores;}
por ejemplo: body {background: #FFCC80 url(imagen.jpg) no-repeat left top;}

sintaxis en JAVASCRIPT
elemento.style.background='valores';
por ejemplo: this.style.background='#FFCC80 url(imagen.jpg) no-repeat left top';

Donde el orden de los valores es: color image repeat attachment position
y por defecto son: transparent repeat scroll 0% 0%






La propiedad background-color establece el color de fondo de un elemento y por defecto su valor es transparent.

sintaxis en HTML
elemento {background-color: color | transparent;}
por ejemplo: body {background-color: #FFCC80;}

sintaxis en JAVASCRIPT
elemento.style.backgroundColor='color | transparent';
por ejemplo: this.style.backgroundColor='#FFCC80';

El color puede ser un nombre, un valor rgb(), un valor hexadecimal o transparent.




DEMO
DEMO
DEMO

La propiedad background-image establece la imagen de fondo de de un elemento.

sintaxis en HTML
elemento {background-image: url | none;}
por ejemplo: body {background-image: url(imagen.jpg);}


sintaxis en JAVASCRIPT
elemento.style.backgroundImage='url | none';
por ejemplo: this.style.backgroundImage='url(imagen.jpg)';

Al colocar una imagen de fondo, es conveniente establecer también un color que es el que se usará si la imagen no es accesible.



La propiedad background-repeat establece si la imagen de fondo de de un elemento se repite y si es así, cómo lo hace.

sintaxis en HTML
elemento {background-repeat: valor;}
por ejemplo: body {background-repeat: valor;}

sintaxis en JAVASCRIPT
elemento.style.backgroundRepeat='valor';
por ejemplo: this.style.backgroundRepeat='valor';

Donde los valores posibles son:
repeat (la imagen se repite horizontal y verticalmente) y es el valor por defecto
repeat-x (la imagen se repite horizontalmente)
repeat-y (la imagen se repite verticalmente)
no-repeat (la imagen no se repite)





La propiedad background-attachment establece si la imagen de fondo permanece fija o se desplaza mediante un scroll.

sintaxis en HTML
elemento {background-attachment: scroll | fixed;}
por ejemplo: body {background-attachment: scroll;}

sintaxis en JAVASCRIPT
elemento.style.backgroundAttachment='scroll | fixed';
por ejemplo: this.style.backgroundAttachment='scroll';


Linea 1
Linea 2
Linea 3
Linea 4
Linea 5
Linea 6
Linea 7
Linea 8
Linea 9

La propiedad background-position establece la posición inicial de imagen de fondo.

sintaxis en HTML
elemento {background-position: valor1 valor2;}
por ejemplo: body {background-position: left top;}

sintaxis en JAVASCRIPT
elemento.style.backgroundPosition='valor1 valor2';
por ejemplo: this.style.backgroundPosition='left top';

Los valores posibles son:
porcentaje | medida (positivos o negativos) ] {1,2} | 0% 0%
o bien: left | center | right | top | center | bottom

Estas son las equivalencias:
left top = 0% 0%
top = center top = 50% 0%
right top = 100% 0%
left = left center = 0% 50%
center = center center = 50% 50%
right = right center = 100% 50%
left bottom = 0% 100%
bottom = center bottom = 50% 100%
right bottom = 100% 100%





DEMO
DEMO
DEMO

MÁS INFORMACIÓN:
  • Un poco más allá de las imágenes (Parte 1)
  • Un poco más allá de las imágenes (Parte 2)
  • 14 comentarios:

    Anónimo  

    Houston we have a problem : Error en Vagabundia Hola JMiur, no hay de que preocuparse, se trata de una preguntita de sentido comun !! Saludos.

    Responder
    Roberto Caamaño  

    No sabia la infinidad de cosas que se hacen con CSS

    Responder
    Unknown  

    Excelente Css con JavaScript
    He gastados cientos de horas tratando de trabajarlos juntos
    y hasta ahora no habia enconrado
    un sitio donde te expliquen
    exactamente como usarlos juntos.

    Responder
    Gem@  

    Gracias por el aviso sobre el tutorial de HTML, me extrañaba que no me respondieras al motivo de su desaparición ;)

    Responder
    admin  

    Hola J.Miur , gracias por aclararme estas pequeñas cosas que me faltaban
    y no les di mucha importancia pero finalmente las se .Muchas gracias J.Miur.

    Responder
    JMiur  

    Me alegro que haya sido de utilidad, en principio es sencillo porque ambas instrucciones tienen más o menos la misma sintaxis.

    El CSS y como controlarlo es, sin duda la base del diseño de cualquier blog y es, a mi entender, la herramienta más poderosa que disponemos.

    Lo del tutorial tuvo tantas idas y vueltas que no podía dar una respuesta concreta. Es una pena haber perdido la cantidad de enlaces que tenía y por los problemas del dominio no poder redireccionarlos pero, comenzaremos otra vez este trabajo de hormiga :$

    Responder
    Tico Vago  

    Exelente mop, exelente!

    Responder
    Azul  

    Otro buen tutorial y datos que aprender y guardar ....

    Un saludo! :D

    Responder
    Anónimo  

    Buenísimo... ¡Enhorabuena!

    Responder
    T  

    Existe la posibilidad de hacer que una imagen de fondo se ajuste al ancho y largo de la pantalla?

    Responder
    JMiur  

    Sí, pero no. Fíjate en esta entrada.

    Responder
    La hormiguita  

    Menos mal que encontré este tutorial... una maravilla... si no lo encontraba iba a preguntarte por el tema..
    Muchas gracias :D

    Responder
    JMiur  

    Me alegro que sirviera :D

    Responder
    artur.909  

    *background-attachment* acaba de salvarme la vida, muchas gracias.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR