Mi background (Fondo) no se quiere CENTRAR

kirus · #1 (**permalink**) 30/06/2011, 03:59

¡Hola, compañeros! Mi problema es este. Quiero algo tan simple como tener un JPG centrado como fondo en mi web con CSS. En un principio y bajo Dreamweaver parece que funciona y en el explorer se ve como debería, o sea así:

Pero me sale eso de "Internet Explorer no permitió que se ejecutaran scripts ni controles Active X en el equipo" y al pulsar en "Permitir contenido bloqueado", me quedo sin centrado y la página pasa a verse así:

O sea, se dezplaza hacia la derecha y queda a faz del cuerpo de la web.

Este es el código CSS de mi web de prueba, donde "Carnaval.jpg" es el fondo:

Código:

/* Site settings */
body {background-color:#ffffff;
background-image:url(Carnaval.jpg);
background-repeat:no-repeat;
background-position:top;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:#000000;
letter-spacing:0em;}

a {text-decoration:underline;}
a:link {color:#B2080B; cursor:pointer;}
a:visited {color:#561A8B;}
a:hover {color:#FF8200;}
a * {color:#B2080B;text-decoration:underline;}
sup {font-size:0.7em; vertical-align: 0.3em;}
sub {font-size:0.7em;}
.xr_tl {position: absolute; white-space: pre; unicode-bidi:bidi-override;}
.xr_tr {position: absolute; white-space: pre; unicode-bidi:bidi-override; text-align:right;}
.xr_tc {position: absolute; white-space: pre; unicode-bidi:bidi-override; text-align:center;}
.xr_tj {position: absolute; unicode-bidi:bidi-override; text-align:justify;}
.xr_ap {position: absolute; border:none;}
.xr_tb {position: absolute; unicode-bidi:bidi-override;}
.xr_tu {unicode-bidi:bidi-override;margin-top:0px;margin-bottom:0px;}

Este es el código de la web simplificado:

Código:

<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/> <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body>
<div class="xr_ap" id="xr_xr" style="width: 770px; height: 600px; top:20px; left:50%; margin-left: -385px;">
</body>

¿Qué puede estar fallando, maestros? Necesito vuestra ayuda, pues es algo muy básico pero no encuentro el error. AYUDA, PLEASE!

whitefeathers · #2 (**permalink**) 30/06/2011, 04:12

Si lo que quieres es centrar el div tendrás que hacer un div contenedor y darle margin: 0 auto;

whitefeathers · #3 (**permalink**) 30/06/2011, 04:15

Te escribo un ejemplo para que lo tengas de referencia.

#wrapper {

width: 960px;

}

#wrapper-inner {

width: 400px;
margin: 0 auto;

}

#content {

width: 200px;
margin: 0 auto;

}

kirus · #4 (**permalink**) 30/06/2011, 04:15

Cita:

Iniciado por whitefeathers

Si lo que quieres es centrar el div tendrás que hacer un div contenedor y darle margin: 0 auto;

No es el div lo que se descoloca, sino el fondo, el div, como ves en las imagenes (y que contiene el cuerpo de la web) siempre aparece correctamente en el centro. Pero es el fondo el que no quiere centrarse.

whitefeathers · #5 (**permalink**) 30/06/2011, 04:17

Creando dos div internos a un contenedor no debe pasarte eso. He visto tu código y no es correcto, le das a text-align: center.

El html sería así

<div id="wrapper">

<div id="wrapper-inner">

<div id="content"></div>

</div>
</div>

kirus · #6 (**permalink**) 30/06/2011, 04:33

Cita:

Iniciado por whitefeathers

Creando dos div internos a un contenedor no debe pasarte eso. He visto tu código y no es correcto, le das a text-align: center.

El html sería así

<div id="wrapper">

<div id="wrapper-inner">

<div id="content"></div>

</div>
</div>

OK, Muchas gracias, funciona así, aunque yo no quería meter la imagen en un DIV, pero bueno, el fin justifica el medio, jeje.. una cosita, lo único que me falta es que aunque ahora lo centra me deja como 3 pixeles por encima del DIV contenedor, ¿Cómo hago para que la imagen surja a ras del top de la pagina sin que deje esos espacios? me imagino que será algo del margin o align.. pero en que parte del código lo pongo? Gracias de nuevo!

kirus · #7 (**permalink**) 30/06/2011, 04:37

Cita:

Iniciado por kirus

OK, Muchas gracias, funciona así, aunque yo no quería meter la imagen en un DIV, pero bueno, el fin justifica el medio, jeje.. una cosita, lo único que me falta es que aunque ahora lo centra me deja como 3 pixeles por encima del DIV contenedor, ¿Cómo hago para que la imagen surja a ras del top de la pagina sin que deje esos espacios? me imagino que será algo del margin o align.. pero en que parte del código lo pongo? Gracias de nuevo!

Jeje, ni caso, compañero, ya lo resolví, en efecto son los márgenes de la página en si, que hay que ponerlos en "0" todos. ¡Muchíisimas gracias!

whitefeathers · #8 (**permalink**) 30/06/2011, 04:47

Mi consejo es que trates de no meter nunca imágenes en el html, ¿por qué? Pues porque lo suyo es que el contenido (html) esté separado totalmente del diseño y el estilo (css). Yo siempre hago backgrounds de imágenes. Me alegra saber que te ha servido.

¡Un saludo!

PD. Soy compañera

kirus · #9 (**permalink**) 30/06/2011, 06:46

Cita:

Iniciado por whitefeathers

Mi consejo es que trates de no meter nunca imágenes en el html, ¿por qué? Pues porque lo suyo es que el contenido (html) esté separado totalmente del diseño y el estilo (css). Yo siempre hago backgrounds de imágenes. Me alegra saber que te ha servido.

¡Un saludo!

PD. Soy compañera

¡Muchas Gracias, compañera! Probando el efecto en la web me he dado cuenta que hay algo que falla aún, como puedes ver en esta imagen, en mi monitor panoramico a pantalla completa el fondo de la web se muestra perfecto centrado con el código que me pasaste del DIV:

Pero si minimizo la ventana del explorer o cambio sus dimensiones, fíjate lo que ocurre con el fondo:

El align del fondo está en "center" ¿Sabes que puede fallar, compañera?
Yo quiero que siempre esté en el centro, como el cuerpo de la web, que se mueve en consecuencia con el ancho de la ventana, manteniendose en el centro, como debiera.
¡AYUDAME, POR FAVOR!

whitefeathers · #10 (**permalink**) 30/06/2011, 06:53

Necesitaría el código para ver el fallo.

kirus · #11 (**permalink**) 30/06/2011, 06:58

Cita:

Iniciado por whitefeathers

Necesitaría el código para ver el fallo.

Ok

este es el codigo de la pag:

Código:

<body>
<div id="wrapper">
	<div id="wrapper-inner">
	<div id="content">
	<div align="center">
	<img src="index_htm_files/FondoDesp.png" width="1904" height="317" alt="Fondo" /></div>
	</div>
	</div>
	</div>
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1000px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 760px; height: 1000px; clip: rect(0px 760px 1000px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 760px; height: 1000px; clip: rect(0px, 760px, 1000px, 0px);"><!--<![endif]-->
 <img class="xr_ap" src="index_htm_files/3.png" alt="" title="" style="left: 25px; top: 198px; width: 716px; height: 612px;"/>
 <img class="xr_ap" src="index_htm_files/4.png" alt="" title="" style="left: 23px; top: 20px; width: 716px; height: 162px;"/>
 <span class="xr_s0" style="position: absolute; left:57px; top:98px;">
  <span class="xr_tl" style="top: -63px;">WEB</span>
 </span>
 <img class="xr_ap" src="index_htm_files/5.png" alt="" title="" style="left: 58px; top: 107px; width: 644px; height: 40px;"/>
 <img class="xr_ap" src="index_htm_files/7.png" alt="" id="photoreplaced" title="" style="left: 55px; top: 240px; width: 351px; height: 528px;"/>
 <img class="xr_ap" src="index_htm_files/8.png" alt="" title="" style="left: 423px; top: 227px; width: 281px; height: 542px;"/>
 <span class="xr_s1" style="position: absolute; left:443px; top:255px;">
  <span class="xr_tl" style="top: -16px;"><span id="Panel:32text"></span>Lorem Ipsum Dolor</span>
  <span class="xr_tl xr_s2" style="top: 215px;">Aliqua in incididunt et esse </span>
  <span class="xr_tl xr_s2" style="top: 238px;">occaecat tempor ut quis </span>
  <span class="xr_tl xr_s2" style="top: 261px;">eiusmod, officia veniam in </span>
  <span class="xr_tl xr_s2" style="top: 284px;">nulla elit? Eiusmod eu, fugiat </span>
  <span class="xr_tl xr_s2" style="top: 307px;">officia reprehenderit laboris </span>
  <span class="xr_tl xr_s2" style="top: 331px;">sint occaecat in lorem dolor </span>
  <span class="xr_tl xr_s2" style="top: 354px;">nisi id proident. Irure magna </span>
  <span class="xr_tl xr_s2" style="top: 377px;">sunt irure velit. Esse </span>
  <span class="xr_tl xr_s2" style="top: 400px;">exercitation commodo minim </span>
  <span class="xr_tl xr_s2" style="top: 423px;">qui do. Eiusmod mollit </span>
  <span class="xr_tl xr_s2" style="top: 446px;">veniam consequat minim </span>
  <span class="xr_tl xr_s2" style="top: 469px;">dolore quis est. </span>
 </span>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);">
 </a>
 </div>
 <div id="xr_xd0"></div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
</body>

y este el del CSS:

Código:

body {background-color:#000000;margin-top:0px;font-family:Arial,sans-serif;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#000000;letter-spacing:0em;}
a {text-decoration:underline;}
a:link {color:#0000EE; cursor:pointer;}
a:visited {color:#561A8B;}
a:hover {color:#0000EE;}
a * {color:#0000EE;text-decoration:underline;}
sup {font-size:0.7em; vertical-align: 0.3em;}
sub {font-size:0.7em;}
.xr_tl {position: absolute; white-space: pre; unicode-bidi:bidi-override;}
.xr_tr {position: absolute; white-space: pre; unicode-bidi:bidi-override; text-align:right;}
.xr_tc {position: absolute; white-space: pre; unicode-bidi:bidi-override; text-align:center;}
.xr_tj {position: absolute; unicode-bidi:bidi-override; text-align:justify;}
.xr_ap {position: absolute; border:none;}
.xr_tb {position: absolute; unicode-bidi:bidi-override;}
.xr_tu {unicode-bidi:bidi-override;margin-top:0px;margin-bottom:0px;}

alebaquero · #12 (**permalink**) 30/06/2011, 08:04

VAmos a ver esto es lo mas sencillo del mundo....

La imagen de fondo tiene que ir en el BODY...si no nunca te va a quedar bien...

BODY{
background:"imagen/imagen.jpg" center top;
margin:0 0;
}

Lo suyo es hacer que el color del pie de la imagen se siga con un color plano ejemplo imaginemos que el color del pie es negro entonces cambiamos a esto

BODY{
background:"imagen/imagen.jpg" center top #000;
margin:0 0;
}

Asi siempre se va a ver en medio por lo menos asi es como lo hago yo y siempre me funciona...

Abrazos!

kirus · #13 (**permalink**) 30/06/2011, 08:08

Cita:

Iniciado por alebaquero

VAmos a ver esto es lo mas sencillo del mundo....

La imagen de fondo tiene que ir en el BODY...si no nunca te va a quedar bien...

BODY{
background:"imagen/imagen.jpg" center top;
margin:0 0;
}

Lo suyo es hacer que el color del pie de la imagen se siga con un color plano ejemplo imaginemos que el color del pie es negro entonces cambiamos a esto

BODY{
background:"imagen/imagen.jpg" center top #000;
margin:0 0;
}

Asi siempre se va a ver en medio por lo menos asi es como lo hago yo y siempre me funciona...

Abrazos!

¿Pero no me decías antes que tenía que ir dentro de un DIV?
Además ahora mismo está dentro del body:
<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="content">
<div align="center">
<img src="index_htm_files/FondoDesp.png" width="1904" height="317" alt="Fondo" /></div>
</div>
</div>
</div>

kirus · #14 (**permalink**) 30/06/2011, 08:18

Cita:

Iniciado por kirus

¿Pero no me decías antes que tenía que ir dentro de un DIV?
Además ahora mismo está dentro del body:
<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="content">
<div align="center">
<img src="index_htm_files/FondoDesp.png" width="1904" height="317" alt="Fondo" /></div>
</div>
</div>
</div>

Ah, no, perdona, que no eras tú quien me dió la otra solución, jeje..
lo siento, pero no me funciona tu solución, sigue haciendo lo mismo.

Donde tengo que poner eso que dices, en el css o en el html?

ZoroRoronoa · #15 (**permalink**) 30/06/2011, 10:23

no se descoloca nada.

Lo que pasa que el background esta muy grande (muy ancho), para esto, hay que usar una solucion la cual hace que el background se adapte al 100% de la ventana, aunque esto trae consecuencias, ya que redimensiona la imagen.

Pero antes de darte esta solucion, te doy otra, la cual hara que cuando minimices no te mueva nada de nada, y para esto hay que ponerle un min-width al div contenedor, en este caso es el body.

en el CSS coloca esto en el body
min-width:1904px;

kirus · #16 (**permalink**) 30/06/2011, 10:44

Cita:

Iniciado por ZoroRoronoa

no se descoloca nada.

Lo que pasa que el background esta muy grande (muy ancho), para esto, hay que usar una solucion la cual hace que el background se adapte al 100% de la ventana, aunque esto trae consecuencias, ya que redimensiona la imagen.

Pero antes de darte esta solucion, te doy otra, la cual hara que cuando minimices no te mueva nada de nada, y para esto hay que ponerle un min-width al div contenedor, en este caso es el body.

en el CSS coloca esto en el body
min-width:1904px;

No lo entiendo, yo he visto webs en mi monitor de 29" con fondos que van de lado a lado y no se descentran al minimizarse, así que debería dar igual la anchura de la imagen, simplemente deberia quedar centrada y lo que sobre a ambos lados ocultarse fuera de pantalla... he probado poniendo el "min-width:1904px;" que me has dado, pero no hace absolutamente nada

Supongo que no se pueden hacer fondos a sangre para monitores panorámicos... ya estoy por desistir y poner un mosaico como todo el mundo..

ZoroRoronoa · #17 (**permalink**) 30/06/2011, 11:23

lo q pasa q el background no se descentra, el background, queda perfectamente igual.
Lo que se mueve es el div que esta centrado.

Si pudieras aportar las imagenes, te pudiera hacer un ejemplo. minimizandose y maximizado.
Saludos

kirus · #18 (**permalink**) 30/06/2011, 13:35

Cita:

Iniciado por ZoroRoronoa

lo q pasa q el background no se descentra, el background, queda perfectamente igual.
Lo que se mueve es el div que esta centrado.

Si pudieras aportar las imagenes, te pudiera hacer un ejemplo. minimizandose y maximizado.
Saludos

Voy a ver si te puedo pasar las imagenes, mientras he hecho este video demostrativo de mi problema, a ver si con una imagen que vale mas que mil palabras veis mejor el fallo. Gracias a todos los que os estais esforzando en ayudarme:
http://www.youtube.com/embed/n4_dLCsBkYU

kirus · #19 (**permalink**) 01/07/2011, 09:33

Cita:

Iniciado por whitefeathers

Necesitaría el código para ver el fallo.

Podrías decirme si hay algo en mi codigo que diga que la web o el entorno de la web tiene que empezar a partir de donde señalo en esta imagen, porque me da que todo este fallo del centrado va por ahí.. Gracias!
http://img263.imageshack.us/img263/7245/corelw.jpg

ZoroRoronoa · #20 (**permalink**) 01/07/2011, 10:41

Kirus.
te seré directo, si quieres una ayuda, haz lo que "nosotros" los que "tratamos" de "ayudarte" te "decimos".

1) Muchos te dicen pongas tu codigo, en el video no se ve muy bien y es mas cansado para la vista de nosotros.

2) Te he pedido las imagenes para darte un ejemplo similar, pero no veo interes.

kirus · #21 (**permalink**) 01/07/2011, 14:26

Cita:

Iniciado por ZoroRoronoa

Kirus.
te seré directo, si quieres una ayuda, haz lo que "nosotros" los que "tratamos" de "ayudarte" te "decimos".

1) Muchos te dicen pongas tu codigo, en el video no se ve muy bien y es mas cansado para la vista de nosotros.

2) Te he pedido las imagenes para darte un ejemplo similar, pero no veo interes.

Perdona si te has sentido ignorado, pero yo he seguido cada paso que me han dado los que me han aportado su ayuda y se los he agradecido, me funcionara o no. Y cuando me han dicho que ponga el código lo he puesto, mira más arriba y lo verás. Lo de las imágenes me lo pediste hace poco, y estaba viendo como subírtelas, interés tengo, sólo que he estado buscando y probando los métodos a ver si se me escapaba algo, pero no te preocupes, que aquí te las subo, compay!

ZoroRoronoa · #22 (**permalink**) 01/07/2011, 18:09

bueno, veo un desorden en los tamaños de las imagenes, a comparacion con la de tus screenshots, pero tratare de hacerte el ejemplo asi como estan las imagenes.
En un momento lo subo.

kirus · #23 (**permalink**) 02/07/2011, 02:33

Cita:

Iniciado por ZoroRoronoa

bueno, veo un desorden en los tamaños de las imagenes, a comparacion con la de tus screenshots, pero tratare de hacerte el ejemplo asi como estan las imagenes.
En un momento lo subo.

¡Ah, pues tienes razón, compañero! Debe ser que "imageshack" reduce las imagenes al subirlas a su servidor, pero bueno, para lo que quiero creo que te puede servir, incluso ni siquiera tiene que ser con estas imágenes, la que uso de fondo en realidad mide:1904 x 327, así que con que pongas un rectángulo de ese tamaño de fondo y se mantenga centrado aunque se maximice o minimice la ventana me vale. Muchas gracias por las molestias.