JMiur [E]

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propeidad que, genéricamente, se define con background, con ella, podemos establecer tanto un color de fondo como una imagen de fondo a todas las etiquetas, a un elemento identificado con un ID o a una clase; todas estas reglas harán que el color de fondo sea blanco:
body { background: #FFFFFF; }
#unelemento { background: #FFFFFF; }
.unaclase { background: #FFFFFF; }
y todas estas harán se muestre una imagen de fondo:
body { background: url(miimagen); }
#unelemento { background: url(miimagen); }
.unaclase { background: url(miimagen); }
El color, puede ser expresado en cualquier formato, ya sea una palabra (white en este caso), como hexadecimal (#FFFFFF o #FFF) o como RGB escribiendo rgb(255,255,255); si es una imagen, el valor dentro de url() debe ser la dirección de esa imagen es decir, dónde está alojada y en Blogger, debe ser absoluta, comenzar con http:// o https://

background: white;
background: #FFFFFF;
background: rgb(255,255,255);
background-color: white
background-color: #FFFFFF;
background-color: rgb(255,255,255);
background:url(una_imagen);

Por defecto, si usamos background, el navegador completará las propiedades restantes ya que esa es una forma de escribir de modo resumido, una serie de propiedades distintas que se controlan distintos parámetros de manera individual. Si sólo agregáramos color, la etiqueta completa sería algo así, aunque el orden interno puede variar:
#unelemento { background: #FFF url() repeat scroll 0 0; }
#unelemento { background: url() repeat scroll 0 0 #FFF; }
Cada una de esas partes puede ser declarada de modo individual:

background-color es el color de fondo y se agrega aún cuando se quiera mostrar una imagen por dos motivos, el primero es que si la imagen es transparente, podemos darle efectos colocando un color distinto al fondo y si no lo es, ese es el color que se mostrará cuando la imagen no se cargue o demore en ser cargada; de ese modo, si hay textos, estos serán legibles.

background-image indica la dirección URL de la imagen a usar y si queremos eliminarla, la dejamos vacía con url() o usamos la palabra none.

background-repeat establece la forma en que tratará la imagen; por defecto el valor es repeat así que la imagen se repetirá como un mosaico en todas direcciones hasta ocupar el ancho y alto del elemento al que lo agregamos; esto es lo que solemos hacer para llenar un determinado espacio con una imagen pequeña. Un valor de no-repeat hará lo contrario, la imagen no se repetirá y es lo que usamos para mostrar un logo o cosas similares. Los otros dos valores posibles son repeat-x y repeat-y que "repiten" la imagen como mosaico pero sólo un una dirección, la primera, horizontalmente y la segunda, verticalmente.

repeat
no-repeat
repeat-x
repeat-y

En realidad, existen otros valores posibles para esa propiedad (space y round) pero, aún no han sido incorporados a los navegadores y sólo funcionan en Opera y en IE9 o superior.

background-position son dos valores que indican en que posición comenzará a ser mostrada esa imagen de fondo y por defecto es 0 0 o left top, la imagen empezará en la parte superior izquierda. Para indicar esa posición podemos usar palabras (top right bottom left), porcentajes o pixeles; por ejemplo, si quisiéramos centrarla usaríamos 50% 50%;

0 0
right bottom
50% 50%
30px 50px

background-attachment admite dos valores, scroll es el que tiene por defecto y el que usamos habitualmente; fixed hará que la imagen quede fija, que ese fondo, permanezca estático cuando hacemos scroll sobre la página y, sólo tiene sentido usarlo si el fondo a llenar es más alto que la ventana del navegador, caso contrario, no veremos diferencia alguna; hagamos la prueba permutando el fondo del blog por una imagen y viendo las diferencias::

8 comentarios:

Johnny  

Lo del fondo o background es muy importante y util para crear diseños para una web o blog. Yo lo suelo utilizar bastante en el blog y en los posts de vez en cuando para darles un toque estetico mas atractivo. Para la gente que no domina esta propiedad, les sera muy util, ya que lo has explicado perfectisimamente.

Responder
Graciela  

Lo describes genial :P

Responder
Gem@  

Leyendo tu maravillosa entrada he caído en la cuenta que utilizo la propiedad background sin detenerme en todas estas reglas que mencionas, quiero decir que aplicarlas es algo mecánico pero no todas por ejemplo fíjate que cuando añado una imagen siempre añado también color background:#FFF url(la-imagen); pero nunca lo hago con background-color y el color sigue ocupando el espacio que no es ocupado por la imagen.
Sabes? estuve mirando si con alguna de estas formas tenemos solución para que esas imágenes negras tan feas que Blogger añade cuando la imagen es eliminada desaparezca y en su lugar deje el color que se añade en la url de la imagen pero no hay modo porque aún de esa forma prevalece la url de la imagen.
Aún así la entrada es fabulosa y para tenerla a mano :)

Responder
Marcos Gratis  

Genial!!! Nada más que decir.

Responder
NickJP!^xD  

eh como hiciste para que cuando precionara click en los link cambiara de background ?

Responder
JMiur  

Gem@:
Una alternativa es usar background: transparent url(la-imagen); y de ese modo, el colro será el del fondo.
Si lo que falta es la imagen o la imagen no se carga, podría hacerse, colcocando una regla genérica tipo: img {background-color: el-color;}
Si lo que se carga es otra imagen, una que manda Blogger y esa imagen tiene una URL que podamos identificar y siempre fuera la misma, podría cambiarse con JavaScript.
El problema, me parece, es que esa imagen no puede ser identificada.

NickJP!^xD
Usando JavaScript: 1 | 2

Responder
Gem@  

Lo veo muy confuso porque no, la url de la imagen que arroja Blogger no es la misma sigue siendo la url de la imagen desaparecida :S

Responder
JMiur  

Sí. Eso vi, sigue usando la misma así que ahí ya no veo que podamos hacer algo porque no hay modo de detectarlo.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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