Poner 2 fondos en una misma página

[myracheel]

Bueno, la cosa es sencilla x) es que salga un fondo en un determinado espacio (sería una imagen) y el resto un color solido.... ¿Alguien sabe como hacerlo?
Os dejo un ejemplo:

http://justinspain.fandeluxe.org/photos

arriba, donde esta la cabecera, hay un tipo de fondo, que concuerda con la imagen y el resto es un color sólido gris...

Gracias :)

[Toth]

Buenas,

eso se hace con la propiedad background del body de la página, con el css. Te paso el link a la documentación: http://www.w3schools.com/css/css_background.asp

Lo que hay que poner es lo siguiente:

body {background:#[Color_de_fondo] url('[archivo_imagen]') repeat-x 0 0;}

Donde repeat-x hace que la imagen se repita horizontalmente.

Espero que te sirva.

[tredio]

creo que seria mejor no-repeat

[jomaruro]

Hola:

Iniciado por tredio

creo que seria mejor no-repeat

¿Porqué?

La mejor solución es crear dos divs uno para la imagen en cuestión y otro para el color sólido.

Saludos.

[myracheel]

Iniciado por jomaruro

Hola:



¿Porqué?

La mejor solución es crear dos divs uno para la imagen en cuestión y otro para el color sólido.

Saludos.

eso es lo que estaba pensando hacer... es mejor que lo otro?

[kseso?]

¿Ninguno de ustedes a jugado a utilizar las 2 etiquetas obligatorias: body y html?

No siempre es posible, pero según en qué casos, dando un fondo a body y otro distinto a html nos podemos evitar un div. O utilizar la caja contenedora de todo para que porte un tercer fondo.

Atentamente

[jomaruro]

Hola:

Iniciado por kseso?

¿Ninguno de ustedes a jugado a utilizar las 2 etiquetas obligatorias: body y html?

La verdad no lo había pensado. Muchas gracias por la información, kseso?

Saludos.

[danneg]

yo ya habia utilizado eso del background en body y en html, pero como siempre, ie no lo interpreta bien

pero aun asi lo sigo utilizando, pero en casos de los fondos como este utilizo esto

Código CSS:

background: #color url(imagen) repeat-orientacion;
 

es muy bueno y eficiente, no se por que es mejor utilizar dos divs, solo ensucia el codigo html, bueno eso a mi parecer

tambien dentro de las especificaciones css3 se pueden poner mas de dos fondos en una sola capa, y ya lo implementa webki, firefox y opera

Código CSS:

background: #fff url("#"),
                #ddd url("#"),
                     #888 url("#");
 

separano los fondos por comas, y posicionandolos a la mejor conveniencia

[myracheel]

Iniciado por danneg

yo ya habia utilizado eso del background en body y en html, pero como siempre, ie no lo interpreta bien

pero aun asi lo sigo utilizando, pero en casos de los fondos como este utilizo esto

Código CSS:

background: #color url(imagen) repeat-orientacion;
 

es muy bueno y eficiente, no se por que es mejor utilizar dos divs, solo ensucia el codigo html, bueno eso a mi parecer

tambien dentro de las especificaciones css3 se pueden poner mas de dos fondos en una sola capa, y ya lo implementa webki, firefox y opera

Código CSS:

background: #fff url("#"),
                #ddd url("#"),
                     #888 url("#");
 

separano los fondos por comas, y posicionandolos a la mejor conveniencia

muchisimas gracias en serio! Voy a utilizar los dos, a ver como quedan :) un beso.

[jomaruro]

Hola:

Iniciado por danneg

yo ya habia utilizado eso del background en body y en html, pero como siempre, ie no lo interpreta bien

pero aun asi lo sigo utilizando, pero en casos de los fondos como este utilizo esto

Código CSS:

background: #color url(imagen) repeat-orientacion;
 

Una pregunta porque no acabo de entenderlo. #color es el color que aparece de fondo sustituyendo la imagen en caso de no existir ¿no?. Además si repites la imagen ¿Como ves el color de fondo?

Saludos.

[danneg]

a pues mira, fuenciona asi

tomando en cuenta por ejemplo un degradado de negro a blanco

Código orden de degradado:

negro
gris osbcuro
gris
plateado
blanco
 

pues #color seria #fff para que cuando la imagen se acaba pues ya so se repetira ni se vera feo, si no que se seguira viendo blanco asia abajo, y el repeat-x sera para que solo se repita horisontalmente y el degradado continue

no se si me explique

[alexk]

en el #8 danneg aplicas una img y un color para cada fondo.... es a lo que se refiere jomaruro el multiple background en CSS 3 solo aplica para background-image y no para background-color osea, que puedes plicar las imagenes de fondo que se necesiten, pero un solo color de fondo solido, tengo entendido. igual es una lastima que con ie no funcione... existe un filtro pero creo que para la version 8 tansolo pero bueno chao

[danneg]

alexk yo tengo entendido que igual funciona para background-color, segun el tutorial que lei sobre css3, la verdad no me gusta implementarlo por lo mismo que ie no lo soporta

pero tengo entendido que sirve igual para image que para color y para el resto de sus variantes, size, position, repeat, attachment, etc

no recuerdo bien cual tutorial fue, pero eso es lo que decia, lo estare buscando, y tambien haciendo pruebas

[alexk]

mmm... es que un fondo solido cubre el 100% x 100% como lo hace una imagen, pero que pasa?...
a las imagenes le ponemos una medida fija desde nuestro editor grafico, y elegimos si esta se repite o no para simular diferentes efectos (bordes redondeados, fondos flexibles, etc...); ahora con un varios fondos solidos no podemos determinar sus dimenciones de cada uno, por lo cual cogera el ultimo color solido aplicado.

[kseso?]

Iniciado por danneg

tambien dentro de las especificaciones css3 se pueden poner mas de dos fondos en una sola capa, y ya lo implementa webki, firefox y opera

Código CSS:

background: #fff url("#"),
                #ddd url("#"),
                     #888 url("#");
 

separano los fondos por comas, y posicionandolos a la mejor conveniencia

Me gustaría ver una página funcionando con este código. Y ya nos dirás con qué navegador y versión lo probaste, pues reconozco que he sido incapaz.

Lo que tengo entendido, creo recordar haber visto en alguna realización y en las pruebas que he realizado (sólo FF 3.6.8) es que ese código es erróneo.

Se puede utilizar múltiples imágenes con la declaración acortada, incluyendo las imágenes, qué repetición y coordenadas:

Código CSS:

body {
  background: url(1.jpg) repeat-x center left, url(2.jpg)  repeat-y left top #cdcdcd;
}
 

o puede declararse por separado cada /propiedad:valor/
En el caso de utilizar la forma acortada /background:.../ si se incluye un color hay que colocarlo después de la última imagen, sin incluir la coma /,/ y un solo color. No admite más de uno. Al menos hasta el momento no lo he conseguido con dos colores.

En caso de querer varios colores, habría que recurrir a /gradient(...)/con el prefijo privativo correspondiente.

Si encuentro un rato libre y con ganas, ya les cuento si es posible definir para el mismo elemento un gradiente y múltiples imágenes, aunque en un principio creo que no, pues los gradientes se declaran (en la forma extendida) como /background-image: gradient(..../ Si no me falla la memoria

Atentamente

[danneg]

pues tratare de hacerlo, aun no encuentoo el tutorial que decia como

pero lo intentare, ya si no funciona se descartara la idea

[yense]

como se da en este caso solo es

background-img

y

background-color

con eso soluciones ese ejemplo

[emprear]

Bueno, esto funciona en FF-Opera-IE 7/8, el resto no probé

Código CSS:

html {
background: url(banner_fresco.jpg) center right no-repeat;
height: 100%;
}
 
body{
background: url(body-top.jpg) top left no-repeat;
height: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
 

Demo:

http://foros.emprear.com/css/multipl...ltiple-bg.html

Saludos

[kseso?]

A eso me refería en #6, Emprear.
Lo único a tener en cuenta es el orden de las reglas en el css. Pues dependiendo del tamaño de las imágenes y las coordenadas de su posición, con independencia de si se repiten en algún eje, puede haber solapamiento, y que una tape por completo o parcialmente a la otra y así parecer que no funciona.

Anímese, tú y el resto, a ver si logra la convivencia de múltiples imágenes y gradiente en el mismo elemento.

Atentamente

[jomaruro]

Hola:

Iniciado por kseso?

Anímese, tú y el resto, a ver si logra la convivencia de múltiples imágenes y gradiente en el mismo elemento.

Está confirmado que múltiples imágenes sólo con un color, he probado el gradiente (sin imagen) pero no me funciona, tendré que estudiar el porqué, después probaré imagen+gradiente pero me huelo que no funcionará.

Saludos.