Colocar imagen de fondo en Div

[babieka]

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!

[daPhyre]

No estoy seguro de haber entendido. Te agradecería que pusieras el ejemplo del que hablas para estar seguro...

[newboy_master]

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.

[babieka]

Iniciado por newboy_master

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.

[daPhyre]

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...

[newboy_master]

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.

[babieka]

Gracias por vuestras respuestas, probaré unas cosas que tengo en mente y os comento.

[babieka]

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.

[babieka]

Puffff, no se como subir la imagen de ejemplo!!

[babieka]

La he subido aquí:

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

[daPhyre]

Archivo no encontrado o~o

[babieka]

Pues si se ve la imagen

[daPhyre]

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!

[babieka]

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.

[Mikmoro]

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

Mikel.

[carlosguzman]

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>