Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

CSS: Dos fondos en pocos segundos

Existe un problema con el que se suelen topar los diseñadores de páginas webs, y este es el de incluir dos fondos en una misma página web. Veamos como podríamos hacerlo sin tocar el código HTML, sólo con la hoja de estilos CSS:

Pongamos como ejemplo que el diseñador tiene una página con un gradiente de fondo (grad.png):

body {
background : url(grad.png) repeat-y top left;
}

Lo primero que se le puede ocurrir es añadir varios elementos background, uno con cada fondo:

body {
background : url(grad.png) repeat-y top left;
background : url(fondo2.png) repeat-y top right;
}

El problema de esta opción es que, según la especificación CSS, la página sólo tendrá el último fondo especificado, ya que sobreescribe al anterior.

¿Cuál podría ser la solución entonces? Fácil, usamos la etiqueta HTML para setear una imagen de fondo y la etiqueta BODY para solapar otro encima:

html {
background : url(grad.png) repeat-y top left;
}

body {
background : url(fondo2.png) repeat-y top right;
}

Aunque con capas se puede hacer prácticamente cualquier cosa, esta es una buena solución para salir del paso en pocos segundos, sin tocar el código HTML.

Escrito por Manz, el , en css. Comentarios recibidos: 27.

27 comentarios de lectores
cumic
cumic
1

Jajaja, qué bueno el zp... Ahora te voy a copiar

aRa
aRa
2

Yo no sepo de eso...

mcdave
mcdave
3

Ahora que lo dices ... está tirao, pero para que se te ocurra ....

Marche Radiuju
Marche Radiuju
4

¿Algún truco para foros phpBB?

balmasedano
balmasedano
5

Útil saberlo, muchas gracias Manz.

Federico
Federico
6

Just for the record, es la especificación de CSS y no la de HTML la que habla sobre cascada y como una regla reemplaza a otra según el orden de aparición.

Manz
Manz
7

Chapeau Federico! Tienes razón, enseguida haré la corrección. Saludos.

dani
dani
8

hola este como sabes mucho de esto kisiera preguntarte como hacr para colocar el nik en colores pero aparte con fondo de solor tambien....?!*

Angel Díaz
Angel Díaz
9

Hola, yo lo he intentado así y no me chusca, te explico: Quiero dos fondos (uno el de la parte de arriba del blog, el naranja) y otro un muñeco chorra fijo en la parte de abajo a la derecha. Si pongo el muñeco en html y bajo hasta abajo de la página (nunca se ve antes) se le ven los pies, pero el resto del muñeco lo tapa el color gris. ¿Alguna idea? Si necesitas una demostración dime y te la mando. Socorroooooooooooooooo!!!

neuka
neuka
10

coMO le pongo fndo de color y degrado a mi nick?????? :)

Maelon
Maelon
11

hola kien me podria decir como colocar el fondo de las letras de el nick en el msn

agustin
agustin
12

no funciona en IEXPLORE

deivis
deivis
13

quieron q me alluden... alguie q sea amable.... porfavorr agregem q importa q sean chamo o chamas... solo quiero q me ayuden a poner el fondo a color

marialex
marialex
14

hooolaaaa!!!! ALGUIEN SABE COMO LEPUEDO COLOCAR UN SKIN A MI MSN...TNGO EL PLUS LIVE...

GORKA
GORKA
15

PARA COLOCARLE EL FONDO A TU NOMBRE DEL MSN PRIMERO DEBES TENER EL MSN LIVE PLUS... VAS A OPCIONES Y DAS CLIK EN CODIGO DE FUENTE, SELECCIONAS COLOR DE FONDO Y ELIGES EL Q QUIERAS

gian
gian
16

quiero lño merjor de fondo para mi ni k psss jajajajaj

karen
karen
17

agreguen ste msn s lo mejor sehh s la chik mas pana q ay dobby_blink182@hotmail.com

hacker-akire
hacker-akire
18

Lea bien la css de W3C JA JA JA JA JA JA J

Epoima
Epoima
19

saludos, he copiado y pegado sus buenos consejos sobre CSS, apenas estoy empezando a rediseñar mi Blogs. Gracias.

Con el Viento
Con el Viento
20

No te haces una idea de cuanto me has ayudado con este tip, me estaba por volver loco probando y probando sin resultado. Muchísimas gracias por compartir!!.

leandro
leandro
21

no es valido para FIREFOX

Manz
Manz
22

Hola Leandro. Quizás hayas realizado mal la comprobación. Acabo de hacer la prueba en Firefox 3.0 y funciona correctamente. Saludos,

Axel Alviso
Axel Alviso
23

Muchas gracias por el tutorial, de gran ayuda.

EnSER
EnSER
24

que buena información pero la verdad que no me funciona con Firefox 3.0 :s o algo hice mal pero la verdad que estoy tratando igual se agradece! saludos

Roniguns
Roniguns
25

Gracias!!!!!, estuve buscando esto desde hace mucho.

Maitaison
Maitaison
26

Muy útil y práctico... si no fuera por esto estaría a punto de perder 1 millón de dólares.

Tamara
Tamara
27

Aunque el truco fue publicado hace tiempo, funciona a la perfección, lo probé en un diseño en Wordpress y se ve tanto en IE como Firefox (luego probaré con otros). Solo me queda decir Gracias!!!! :D

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.