Foros del Web » Creando para Internet » HTML »

Poner 2 fondos en una misma página

Estas en el tema de Poner 2 fondos en una misma página en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/08/2010, 14:33
 
Fecha de Ingreso: julio-2010
Mensajes: 15
Antigüedad: 7 años, 4 meses
Puntos: 0
Poner 2 fondos en una misma página

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 :)
  #2 (permalink)  
Antiguo 14/08/2010, 15:47
 
Fecha de Ingreso: agosto-2010
Mensajes: 1
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Poner 2 fondos en una misma página

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.
  #3 (permalink)  
Antiguo 14/08/2010, 21:48
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: Poner 2 fondos en una misma página

creo que seria mejor no-repeat
  #4 (permalink)  
Antiguo 15/08/2010, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Poner 2 fondos en una misma página

Hola:

Cita:
Iniciado por tredio Ver Mensaje
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.

  #5 (permalink)  
Antiguo 15/08/2010, 14:36
 
Fecha de Ingreso: julio-2010
Mensajes: 15
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Poner 2 fondos en una misma página

Cita:
Iniciado por jomaruro Ver Mensaje
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?
  #6 (permalink)  
Antiguo 15/08/2010, 16:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner 2 fondos en una misma página

¿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
  #7 (permalink)  
Antiguo 15/08/2010, 17:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Poner 2 fondos en una misma página

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
¿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.

  #8 (permalink)  
Antiguo 16/08/2010, 02:10
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Poner 2 fondos en una misma página

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:
Ver original
  1. 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:
Ver original
  1. background: #fff url("#"),
  2.                 #ddd url("#"),
  3.                      #888 url("#");

separano los fondos por comas, y posicionandolos a la mejor conveniencia
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #9 (permalink)  
Antiguo 16/08/2010, 10:43
 
Fecha de Ingreso: julio-2010
Mensajes: 15
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Poner 2 fondos en una misma página

Cita:
Iniciado por danneg Ver Mensaje
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:
Ver original
  1. 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:
Ver original
  1. background: #fff url("#"),
  2.                 #ddd url("#"),
  3.                      #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.
  #10 (permalink)  
Antiguo 16/08/2010, 14:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Poner 2 fondos en una misma página

Hola:

Cita:
Iniciado por danneg Ver Mensaje
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:
Ver original
  1. 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.

  #11 (permalink)  
Antiguo 16/08/2010, 14:27
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Poner 2 fondos en una misma página

a pues mira, fuenciona asi

tomando en cuenta por ejemplo un degradado de negro a blanco

Código orden de degradado:
Ver original
  1. negro
  2. gris osbcuro
  3. gris
  4. plateado
  5. 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
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #12 (permalink)  
Antiguo 16/08/2010, 15:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Poner 2 fondos en una misma página

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
  #13 (permalink)  
Antiguo 16/08/2010, 15:25
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Poner 2 fondos en una misma página

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
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #14 (permalink)  
Antiguo 16/08/2010, 15:50
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Poner 2 fondos en una misma página

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.
  #15 (permalink)  
Antiguo 16/08/2010, 16:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner 2 fondos en una misma página

Cita:
Iniciado por danneg Ver Mensaje
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:
Ver original
  1. background: #fff url("#"),
  2.                 #ddd url("#"),
  3.                      #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:
Ver original
  1. body {
  2.   background: url(1.jpg) repeat-x center left, url(2.jpg)  repeat-y left top #cdcdcd;
  3. }
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
  #16 (permalink)  
Antiguo 16/08/2010, 17:46
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Poner 2 fondos en una misma página

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

pero lo intentare, ya si no funciona se descartara la idea
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #17 (permalink)  
Antiguo 16/08/2010, 20:38
Avatar de yense  
Fecha de Ingreso: febrero-2008
Ubicación: Perú Lima
Mensajes: 340
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Poner 2 fondos en una misma página

como se da en este caso solo es

background-img

y

background-color

con eso soluciones ese ejemplo
__________________
©® -> Conocer algo mas es dar un paso mas <- ®©
  #18 (permalink)  
Antiguo 16/08/2010, 22:16
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Poner 2 fondos en una misma página

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


Código CSS:
Ver original
  1. html {
  2. background: url(banner_fresco.jpg) center right no-repeat;
  3. height: 100%;
  4. }
  5.  
  6. body{
  7. background: url(body-top.jpg) top left no-repeat;
  8. height: 100%;
  9. padding: 0;
  10. margin: 0;
  11. overflow: auto;
  12. }


Demo:

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #19 (permalink)  
Antiguo 17/08/2010, 06:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner 2 fondos en una misma página

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
  #20 (permalink)  
Antiguo 17/08/2010, 14:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Poner 2 fondos en una misma página

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
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.


Etiquetas: poner, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:20.