Foros del Web » Creando para Internet » CSS »

Colocar imagen de fondo en Div

Estas en el tema de Colocar imagen de fondo en Div en el foro de CSS en Foros del Web. Soy un recién ingresado en este foro y después de buscar en el mismo mi duda y no encontrarla, intentaré explicarme lo mejor posible. Hace ...
  #1 (permalink)  
Antiguo 07/07/2008, 09:44
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Colocar imagen de fondo en Div

Soy un recién ingresado en este foro y después de buscar en el mismo mi duda y no encontrarla, intentaré explicarme lo mejor posible.
Hace poquito que estoy aprendiendo a diseñar con CSS para unas webs que tengo encargadas. He observado muchos ejemplos como los de Zen Garden y una vez editados en dreamweaver para estudiarlos tengo la siguiente duda:
En algunos ejemplos, las imágenes de fondo grandes aparecen fraccionadas en cada una de las cajas div. Por el formato de dichas cajas div y por lo que deduzco es que el fraccionado de dichas imágenes es automático y creadas en fireworks y exportadas a dreamwaver como capas CSS. Si no es así, no entiendo como se puede 'trocear la imagen y hacerla coincidir en cada capa CSS'

Disculpar si no me he explicado correctamente y si es así adjuntaría un ejemplo.
Muchas gracias!
  #2 (permalink)  
Antiguo 07/07/2008, 11:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Colocar imagen de fondo en Div

No estoy seguro de haber entendido. Te agradecería que pusieras el ejemplo del que hablas para estar seguro...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 07/07/2008, 14:42
Avatar de newboy_master  
Fecha de Ingreso: enero-2008
Ubicación: Granada
Mensajes: 882
Antigüedad: 16 años, 1 mes
Puntos: 46
Respuesta: Colocar imagen de fondo en Div

Supongo que te refieres a cuando se dividen los diseños del Photoshop por sectores y coincide el diseño pegando los sectores. Explicate mejor.

Salu2.
  #4 (permalink)  
Antiguo 07/07/2008, 15:50
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

Cita:
Iniciado por newboy_master Ver Mensaje
Supongo que te refieres a cuando se dividen los diseños del Photoshop por sectores y coincide el diseño pegando los sectores. Explicate mejor.

Salu2.
Exacto, más o menos es eso, pero en vez de ser sectores que coincide sean secciones div. Por ejemplo en esta página CSS de Zen Garden

http://www.csszengarden.com/?cssfile=213/213.css


La imagen de fondo habrá sido creada en photoshop o similar y exportada como fondo en dreamweaver... eso creo. Posteriormente se han añadido las capas div para crear CSS pero si os fijais en el pulpo de abajo y le dais a 'ver imagen de fondo' aparece seccionado dentro de lo que se supone debe ser una sección div. Lo que no se muy bien es como crear algo parecido. Realizar el diseño de imagen, exportar a dreamweaver como fondo, luego crear las secciones div pero.. ¿cómo se exporta la página final para que aparezca la imagen seccionada?
Perdonar de nuevo si no me he explicado bien del todo. Si hubiera la posibilidad de adjuntar un archivo rar con algún ejemplo de los que tengo lo haré, pero no se si permite el foro hacerlo.
  #5 (permalink)  
Antiguo 07/07/2008, 16:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Colocar imagen de fondo en Div

No estoy muy seguro, pero creo que lo que intentas sería algo así:

<div style="background: url(pulpo.png) no-repeat;width:300px;height:300px">

Pones este div debajo del otro, y ya debería aparecerte. Es eso o aun no comprendo lo que intentas...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 07/07/2008, 16:29
Avatar de newboy_master  
Fecha de Ingreso: enero-2008
Ubicación: Granada
Mensajes: 882
Antigüedad: 16 años, 1 mes
Puntos: 46
Respuesta: Colocar imagen de fondo en Div

Diseña algunos elementos de tu web o la web entera con photoshop y luego exportalos y ya los colocas con divs o como veas, si quieres hacer una similar a la que me has enseñado empieza por leer su CSS: http://www.csszengarden.com/213/213.css

Salu2.
  #7 (permalink)  
Antiguo 07/07/2008, 16:36
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

Gracias por vuestras respuestas, probaré unas cosas que tengo en mente y os comento.
  #8 (permalink)  
Antiguo 08/07/2008, 03:39
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

http://www.subirimagen.es/196729/ejemplodiv_jpg.html

He indagado en el tema que consulto y en el ejemplo que adjunto como imagen intento explicarme mejor.
Como podreis observar la regla CSS 'quicksummary' contiene una imagen de fondo llamada r3_zen666_qs_bg.png y que corresponde a la caja div que esta marcada. Yo creo que no debería tener fondo. Entonces... ¿no hubiera sido más fácil un div contenedor con la imagen de fondo y encima las capas div? ¿Por qué aparece en sectores la imagen en varias capas div?
Espero que me haya explicado mejor.

Última edición por babieka; 08/07/2008 a las 03:45
  #9 (permalink)  
Antiguo 08/07/2008, 03:40
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

Puffff, no se como subir la imagen de ejemplo!!
  #10 (permalink)  
Antiguo 08/07/2008, 03:43
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

La he subido aquí:

http://www.subirimagen.es/196729/ejemplodiv_jpg.html
  #11 (permalink)  
Antiguo 08/07/2008, 09:01
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Colocar imagen de fondo en Div

Archivo no encontrado o~o
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 08/07/2008, 16:06
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Colocar imagen de fondo en Div

Pues si se ve la imagen
  #13 (permalink)  
Antiguo 08/07/2008, 16:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Colocar imagen de fondo en Div

Ya pude verlo.

Tienes razón, al menos a mi, se me hubiera hecho más sencillo poner un solo fondo y ponerselo al body como background. Sin embargo, por alguna extraña y peculiar razón, al autor de ese CSS se le ocurrió hacerlo en partes y poner cada parte a cada div. ¿Por qué? Quien sabe, quizá se le hizo más sencillo así o algo, no estoy seguro.

Ahora, que si quieres hacerlo así, es sencillo, solo elijes un fondo, lo cortas en partes, a cada div le asignas su parte con su respectivo alto y ancho; posiblemente desees poner los divisores como absolutos para posicionarlos con presición, ¡Y listo! Tienes tu página en fracciones, con mayor trabajo y menos flexibilidad.

No se que es lo que intentes hacer con esto, pero lo veo poco recomendable para un caso así. Espero haya resuelto tu duda. ¡Suerte!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #14 (permalink)  
Antiguo 09/07/2008, 07:31
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 15 años, 8 meses
Puntos: 0
Sonrisa Respuesta: Colocar imagen de fondo en Div

Gracias por tu respuesta daPhyre. No pretendo realizar el diseño de página como el ejemplo de muestra porque realmente como comentas es harto complicado y no facilita en nada el diseño y posicionado de cajas. Lo que ocurre es que me extrañaba este tipo de seccionado de imágenes que no logro averiguar porque complicarse la vida (se como se ha realizado, pero no su cometido). Lo mejor es un fondo en body o una capa div que haga de contenedor.
Aclarado el tema.
  #15 (permalink)  
Antiguo 09/07/2008, 08:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Colocar imagen de fondo en Div

Seguro que es porque proviene de un programa que lo trocea y lo monta automáticamente.

Mikel.
  #16 (permalink)  
Antiguo 09/07/2008, 21:40
 
Fecha de Ingreso: julio-2008
Ubicación: Bogota
Mensajes: 19
Antigüedad: 15 años, 8 meses
Puntos: 0
Hola mira es de esta forma

Hola perdon que sea tan rapido.. hay te envio algo espero te ayude... hay puedes ver las 2 formas que conozco de declarar un background...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insertar Background</title>
<style media="all" type="text/css">
body {
background: #FFFFFF;
margin:2px;}
#contenedor {
// de esta forma colocas una imagen de background
background:url(calendar.png) no-repeat;
left:200px;
}
</style>
</head>

<body>
<div id="contenedor">Aqui colocas el contenido</div>
</body>
</html>
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 05:21.