Problema para colocar una imagen de fondo en un div

Citar

Escrito el 18 Abr 2008 08:20 pm

Tengo una gran duda sobre como incluir una imagen de fondo en un div. He visto varios tutoriales que dicen que esta es la manera correcta pero a mi no me funciona, ¿alguien podria echarme una mano?
En el index.html tengo esto:

Código :

<html>
<head>
<title></title>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> 
</head>
<body>
   <div id="contenedor">
      <div id="cabecera"></div>
      <div id="C01">C01</div>
      <div id="C02">CO2</div>
   </div><!-- fin contenedor -->
</body>
</html>

En la hoja de estilo tengo esto:

Código :

/* CSS Document */
body{
margin:0;
}
#contenedor{
}
#cabecera{
background-image:url(/imagenes/imagenfondo.jpg);
background-repeat:no-repeat;
background-position:left;
}
#C01{
}
#C02 {
}

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 18 Abr 2008 08:32 pm

así:

Código :

background-image:url(imagenes/imagenfondo.jpg);

ó

Código :

background-image:url(../imagenes/imagenfondo.jpg);

Dependiendo de donde se encuentra tu imagen.

Por Darel

725 de clabLevel

5 tutoriales

Envíale un mensaje privado Email

I'm a human

@Darel

Citar

Escrito el 18 Abr 2008 10:22 pm

Lo siento, he probado pero ninguna de las dos maneras me funciona. La carpeta "imagenes" que contiene "imagenfondo.jpg" esta en el mismo nivel que el index.html (por si te pudiera ser de ayuda).

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 18 Abr 2008 10:58 pm

Esto en el <head>

Código :

<style>
body{background-image:url('imagenes/imagenfondo.jpg');}
</style>

Teniendo en cuenta que:

"imagenfondo.jpg", está en la carpeta "imagenes".
la carpeta "imagenes", está en la misma carpeta que la página que contiene el <head> en que pones este <style>
no usas mayúsculas, ni acentos, en el nombre de la foto, ni de las carpetas, sino sólo minúsculas, y números.

Si con estas directrices, y con lo que ya se te ha dicho, sigues sin poder, te recomiendo:

rizome escribió:

[...] dos manuales [...] pequeños (de bolsillo) y baratos (13-15€/unidad).
Son de la misma editorial... y de manejo casi diario.

[...]Lo ideal, sería que te lo tomaras con calma, y empezases poco a poco, como te digo, con una guía de xHTML y CSS (te aconsejo los libros "Guía práctica para usuarios", de ANAYA)

y

...y un editor de texto plano (tipo "notepad", "notepad++", u otros como el Eclipse (junto con el Aptana), que te recomendará el maestro Aoyama)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 19 Abr 2008 04:34 pm

Las rutas de los archivox externos se basan desde el css, no desde el html.
Si tienes esto

Código :

- index.html
  - css
    - site.css
  - images
    - fondo.png

debes ponre esto

Código :

background-image: url(../images/fondo.png);

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 19 Abr 2008 04:44 pm

celentano escribió:

Según su ejemplo, sin los "puntos suspensivos".

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 19 Abr 2008 05:26 pm

Pues el caso es que para poner la imagen de fondo en el body no encuentro ningun problema, me lo hace perfectamente. Lo que no puedo conseguir es poner un div con una imagen de fondo en "cabecera", por ejemplo. Y esto es posible segun manuales que veo por ahi, ¿el codigo es igual? no creo que tenga que ver con la ruta de que se le pone a la carpeta, porque probe todas las opciones...

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 19 Abr 2008 05:37 pm

sí.para body, div, o cualquier otro elemento, es igual.
Pon la URL de la página que te da problemas.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 20 Abr 2008 10:24 am

Vale, me di cuenta de mi error. Si que pone la imagen de fondo sea cual sea (body, div)... El caso es que en el div tenia que haber algo, un texto, una imagen..., yo he puesto un png transparente y ahora se ve la imagen de fondo. El caso es que lo que no me sirve para lo que queria hacer, que era una cabecera que se ajustase al tamaño del monitor de cada usuario. Pensaba que teniendo un div con una imagen de fondo lo bastante ancha entre otros divs con float izq y der, daria la impresion de abarcar toda la pantalla.
Lo siento pero no tengo por el momento url de esto. Se lo dejo en html y css,
El html:

Código :

<html>
<head>
<title></title>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> 
</head>
<body>
   <div id="contenedor">
   <div id="cabecera">
      <div class="A01"><img src="imagenes/mapaweb.jpg" /></div>
         
      <div class="B01"><img src="imagenes/banda.jpg" /></div>

      <div class="C01"><img src="imagenes/logo.jpg"/></div>
      <div class="C02"><img src="imagenes/inv.png"/></div>
      <div class="C03"><img src="imagenes/brujula.jpg"/></div><!-- C01 -->
   </div><!-- fin cabecera -->
   </div><!-- fin contenedor -->
</body>
</html>

El css:

Código :

/* CSS Document */

body{
margin:0;
}

#contenedor{
margin: 0;
width:100%;
}

#cabecera{
width:100%;
}

.A01{
float:right;
}

.B01 img{
width:100%;
height:5px;
}

.C01 img{
float:left;
}

.C02 img{
float:left;
width:75%;
background-image:url(imagenes/consultoria.jpg);
}
.C03 img{
float:right;
}

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 20 Abr 2008 11:14 am

Vamos a ver.
El código q pusiste al comienzo del hilo, y el q has puesto ahora, son distintos.
En el que pusiste el primero de todos:

Código :

#cabecera{
background-image:url(/imagenes/imagenfondo.jpg);
background-repeat:no-repeat;
background-position:left;
}

¿cómo pretendes que te ponga el background, a algo que no tiene tamaño?

Prueba poniéndole un alto a esa capa, y verás como no necesita de ningún contenido dentro (ni texto, ni imágenes transparentes)

En fin.
Estás muy verde en CSS.
Creo que para que aquí te podamos ayudar, debes hacer "tu parte del trabajo", que es, cuanto menos, conocer el tema.
Revisa los manuales que te indiqué, o algunos por internet (aunq recomiendo los libros de ANAYA)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Problema para colocar una imagen de fondo en un div

Escribe una respuesta rapida