Centrar fondo

Pejigo · #1 (**permalink**) 21/02/2010, 00:29

Pues quisiera saber como centrar completamente el fondo tanto horizontalmente como verticalmente. Llevo rato intentándolo y buscando y no consigo hacerlo. Tan solo lo centro horizontalmente y pegado arriba, no justo en el centro.

Este es el código:
body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:600px;
}

Un saludo

daPhyre · #2 (**permalink**) 21/02/2010, 00:32

Eso es raro, debería funcionar...

Creo que se por donde va el problema, prueba poner este código al comienzo de tu CSS:

html, body{min-height:100%}

Dime si funciona, si no, el problema a de ser otro... ¿Qué navegador usas?

Pejigo · #3 (**permalink**) 21/02/2010, 10:26

Pues no funciona. Como navegador utilizo Opera 10 firefox 3 e IE 8.
La web la miro en los tres. Y para comprobar las diferentes resoluciones utilizo esta web http://viewlike.us/

Este es el código CSS al completo

<style type="text/css">
a { outline: none; }
body {
min-height:100%;
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:600px;
}
#container {
background-image: url(images/home.png);
position:relative;
left: 50%;
top: 50%;
width:1000px;
height:600px;
margin-top:-300;
margin-left: -500px;
}
#titulo {
position:absolute;
left:0%;
top:5%;
width:444px;
height:35px;
z-index:1;
}
#apDiv1 {
position:absolute;
left:5%;
top:20%;
width:139px;
height:24px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:5%;
top:25%;
width:163px;
height:24px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:5%;
top:30%;
width:249px;
height:24px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:5%;
top:35%;
width:155px;
height:24px;
z-index:1;
}
#apDiv5 {
position:absolute;
left:5%;
top:40%;
width:313px;
height:24px;
z-index:1;
}
#apDiv6 {
position:absolute;
left:5%;
top:45%;
width:111px;
height:24px;
z-index:1;
}
#apDiv7 {
position:absolute;
left:5%;
top:50%;
width:147px;
height:24px;
z-index:1;
}
#apDiv8 {
position:absolute;
right:0%;
bottom:0%;
width:381px;
height:12px;
z-index:1;
}
</style>

daPhyre · #4 (**permalink**) 21/02/2010, 17:57

1) Contradices el min-height en el body.
2) No usaste el min-height en el html.
3) No creo poderte ayudar sin el código html una vista de tu página.

Revisa si alguna de las tres anteriores (En ese orden) resuelve tu problema.

Pejigo · #5 (**permalink**) 22/02/2010, 15:19

<html>
<style type="text/css">
a { outline: none; }
body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:600px;
}
#container {
background-image: url(images/fondohome.jpg);
position:relative;
left: 50%;
top: 0%;
width:1000px;
height:600px;
margin-left: -500px;
}
#titulo {
position:absolute;
left:0%;
top:5%;
width:444px;
height:35px;
z-index:1;
}
#apDiv1 {
position:absolute;
left:5%;
top:20%;
width:139px;
height:24px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:5%;
top:25%;
width:163px;
height:24px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:5%;
top:30%;
width:249px;
height:24px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:5%;
top:35%;
width:155px;
height:24px;
z-index:1;
}
#apDiv5 {
position:absolute;
left:5%;
top:40%;
width:313px;
height:24px;
z-index:1;
}
#apDiv6 {
position:absolute;
left:5%;
top:45%;
width:111px;
height:24px;
z-index:1;
}
#apDiv7 {
position:absolute;
left:5%;
top:50%;
width:147px;
height:24px;
z-index:1;
}
#apDiv8 {
position:absolute;
right:0%;
bottom:0%;
width:381px;
height:12px;
z-index:1;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="container">
<div id="titulo"><img src="images/davidcalfstudio.gif" width="444" height="35" class="latest_img"/></div>
<div id="apDiv1"><a href="fashion.html"><img src="images/btnfashion.gif" width="139" height="24" alt="Fashion" class="latest_img" border="0"/></a></div>
<div id="apDiv2"><a href="underconstruction.html"><img src="images/btneditorial.gif" width="163" height="24" alt="Editorial" class="latest_img" border="0"/></a></div>
<div id="apDiv3"><a href="underconstruction.html"><img src="images/btnadvertisement.gif" width="249" height="24" alt="Advertisement" class="latest_img" border="0"/></a></div>
<div id="apDiv4"><a href="underconstruction.html"><img src="images/btnpersonal.gif" width="155" height="24" alt="Personal" class="latest_img" border="0"/></a></div>
<div id="apDiv5"><a href="underconstruction.html"><img src="images/btnbehindthescenes.gif" alt="Behind the Scenes" width="313" height="24" class="latest_img" border="0"/></a></div>
<div id="apDiv6"><a href="about.html"><img src="images/btnabout.gif" width="111" height="24" alt="About" class="latest_img" border="0"/></a></div>
<div id="apDiv7"><a href="contact.html"><img src="images/btncontact.gif" width="147" height="24" alt="Contact" class="latest_img" border="0"/></a></div>
<div id="apDiv8"><img src="images/copyright.gif" width="381" height="12" style="border: none;" class="latest_img"/></div>
</div>
</body>
</html>

Este seria el código completo

daPhyre · #6 (**permalink**) 22/02/2010, 17:38

A mi si me está centrando... ¿De que resolución es tu imagen? Quizá eso esté afectando... ¿Tienes un enlace a ella en algún lado?

Pejigo · #7 (**permalink**) 22/02/2010, 18:47

Si te refieres a la del fondo tiene 1280x650

daPhyre · #8 (**permalink**) 22/02/2010, 22:47

Pues no hay forma, yo lo veo centrado :S... Ya copie tu página y le puse un fondo del mismo tamaño, y lo veo centrado en mis navegadores (Chrome y Firefox).

En todo caso, una pequeña barra negra en la parte inferior, la cual desaparece cuando le aplico el código que te había dado antes:

html, body{min-height:100%}

Si esto no te sirve, necesitaré ver un screenshot del error que produce tu página para ver el problema...

Pejigo · #9 (**permalink**) 23/02/2010, 21:13

www.davidcalf.site11.com

aquí tienes la dirección a ver si das con ello.
Y muchas gracias por tu atención daPhyre

alexk · #10 (**permalink**) 23/02/2010, 22:55

Código:

#container {
cursor:pointer;
height:100%;
position:fixed;
width:100%;
}

y yap...

PD: mejor usa png para la imagen que estara centrada ya que no coincide con la imagen del fondo...

no estas haciendo lo que te recomienda daPhyre...

Pejigo · #11 (**permalink**) 24/02/2010, 06:38

para centrar el contenedor no tengo problema.
el problema es que no me centra el background, solo eso.
es jodido el background solo lo veo bien si lo pongo en background-position:top
pero si lo intento centrar justo en medio, me sale el fondo pegado por la mitad arriba.

alexk · #12 (**permalink**) 24/02/2010, 09:12

pues la respuesta esta desde el 2# que no hagas caso ya es cosa tuya chao

Pejigo · #13 (**permalink**) 24/02/2010, 09:37

http://www.davidcalf.site11.com/home.html

body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:100%;
}
#container {
background-image: url(images/fondohome.jpg);
position:relative;
left: 50%;
top: 50%;
width:1000px;
height:600px;
margin-left: -500px;
margin-top: -300px;
}

Haber. Hasta donde yo me se. Hay tengo puesto que el background este justo en el centro. Y el container tengo puesta la medida que quiero y lo he centrado.

daPhyre · #14 (**permalink**) 24/02/2010, 13:53

Cita:

Iniciado por daPhyre

html, body{min-height:100%}

El día que incluyas esa línea en tu código, nos avisas por favor

Pejigo · #15 (**permalink**) 24/02/2010, 14:23

Que bochorno jaja perdonadme. Lo siento por ser tan torpe.
Pero que pongo ese código tal cual a parte del código CSS que tengo para el body.
Es que lo acabo de probar de varias maneras y no me sale.

daPhyre · #16 (**permalink**) 24/02/2010, 14:33

Tienes que ponerlos a ambos, html y body. Por eso te digo que solo lo copies y lo pegues al inicio de tu css.

Pejigo · #17 (**permalink**) 24/02/2010, 15:25

Pues ya lo hice funcionar.
El código quedó así:
html {min-height:100%}
body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:100%;
}
#container {
background-image: url(images/fondohome.jpg);
position:fixed;
left: 50%;
top: 50%;
width:1000px;
height:600px;
margin-left: -500px;
margin-top: -300px;
}

Tuve que poner el container en fixed para que se centrara.
Pero el problema es que cuando alguien tenga la ventana del navegador mas pequeña, no se puede ver, por que el scroll que sale no desplaza el container.

Mil gracias daPhyre

Pejigo · #18 (**permalink**) 26/02/2010, 15:46

Alguien sabe si podría centrarlo sin tener que usar fixed, ya que comprobé que con esta opción se queda fijo y no se puede llegar a mover con el scroll

daPhyre · #19 (**permalink**) 26/02/2010, 23:55

No le pongas el fixed y debería funcionar sin problemas. Aunque debido a la reubicación del fondo, es posible que te interese más un center top que un center center...

Pejigo · #20 (**permalink**) 27/02/2010, 09:26

Si le quito el fixed, no consigo que se me centre con ninguna de las otras opciones: absolute, relative...
Provisionalmente pondría la web en top, de esta forma no me ocasiona problemas. Pero me interesa mucho más ponerla justo en el centro

Pejigo · #21 (**permalink**) 02/03/2010, 18:24

Alguien sabe si es posible lo que quiero hacer?

Pejigo · #22 (**permalink**) 13/03/2010, 07:40

lo he seguido intentando, pero no hay manera. Debe de haber alguna.
Haber si alguien me puede ayudar.
Gracias

Pejigo · #23 (**permalink**) 27/03/2010, 10:25

Tiene que existir alguna forma de conseguirlo. Alguien sabe?

alexk · #24 (**permalink**) 27/03/2010, 11:08

bueno 4 mensajes tuyos seguidos uff parece que si lo necesitas jaja...
si me pu dieras hacer un resumen de lo que pasa y lo que quieres lo podria mirar pero ahora no entiendo naa pense que ya estaba arreglado...

Pejigo · #25 (**permalink**) 27/03/2010, 13:51

Cita:

Iniciado por Pejigo

Pues ya lo hice funcionar.
El código quedó así:
html {min-height:100%}
body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:100%;
}
#container {
background-image: url(images/fondohome.jpg);
position:fixed;
left: 50%;
top: 50%;
width:1000px;
height:600px;
margin-left: -500px;
margin-top: -300px;
}

Tuve que poner el container en fixed para que se centrara.
Pero el problema es que cuando alguien tenga la ventana del navegador mas pequeña, no se puede ver, por que el scroll que sale no desplaza el container.

Mil gracias daPhyre

Pues aquí lo tengo explicado. Conseguí centrarlo con vuestras indicaciones, pero a costa de que si hay alguien que tenga una resolución menor a la del contenedor no le aparece el scroll para que pueda ver todo el contenido. Así que esa opción no me resulta del todo practica.

A ver si hay suerte y lo consigues alexk

alexk · #26 (**permalink**) 28/03/2010, 11:00

aver... pero es en este sitio?
http://www.davidcalf.site11.com/
es la pagina de inicio? u alguna interna? si es esta de inicio...
no te entiendo nada aun....
quieres que la imagen este centrada vertical y horizontalmente no?...
aver que tienes la imagen de fondo y tienes esa que dice "david calf"....
bueno centrar eso se puede pero con esas imagenes no...

si es esta de inicio...

Código:

#container {
cursor:pointer;
height:600px;
position:fixed;/*yo quitaria esto que no le veo sentido*/
width:100%;
}

y ya se centraria tu texto ese de "david calf" le pones un png y listo... sino es lo que quieres perdona pero no entiendo naa... suerte

Pejigo · #27 (**permalink**) 28/03/2010, 16:11

Quiero que se centren todas las paginas de la misma manera. Y con eso no tengo ningún problema, el problema es el background del body que no consigo centrarlo, solo de la manera que te indique antes poniendo el container fixed me salio y de esa manera no puedo ya que pierdo los scrolls para resoluciones mas pequeñas.

Pejigo · #28 (**permalink**) 30/03/2010, 13:27

Como el problema estaba en el background del body he estado probando en crear otro div con el background en el. Y lo he puesto que envuelva el div del contenedor.
Y estaba muy contento viendo como funcionaba en el chrome. Más tarde probe en IE8 y en Opera y no anda de ninguna manera.
Las alternativas que probe son algo asi

Código:

html {min-height:100%}
body {
background-color: #000;
position:relative;
min-width:1024px;
min-height:100%;
}
#back {
	background-image: url(images/fondo.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	position:relative;
	left: 50%;
	top: 50%;
	width:1280px;
	height:650px;
	margin-left: -640px;
	margin-top: -325px;
}
#container {
background-image: url(images/fondohome.jpg);
position:relative;
left: 50%;
top: 9px;
width:1000px;
height:600px;
margin-left: -500px;
margin-top: -300px;
}

y mi web es esta

http://www.davidcalf.com/

solo que las pruebas que voy haciendo no las voy a subir allí.

y después esta la opción que me recomendaron mas arriba que no entiendo como no puede funcionar bien, solo llega a funcionar si pongo el container en fixed

Código:

html, body{min-height:100%}
body {
	background-color: #000;
	background-image: url(images/fondo.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
	position:relative;  
    min-width:1024px;  
    min-height:600px;
}
#container {
	background-image: url(images/fondohome.jpg);
	position:relative;
	left: 50%;
	top: 50%;
	width:1000px;
	margin-left: -500px;
	height:600px;
	margin-top: -300px;
	overflow:visible;
}

Pejigo · #29 (**permalink**) 30/03/2010, 17:42

Rebuscando por el foro encontré una solución, pero como siempre es a medias.

http://www.forosdelweb.com/f53/como-centrar-css-319844/

ejemplo:
http://www.zevra.com/experimentos/centrovertical.html

Aquí ponen una solución que funciona excepto por el fondo del body, que no consigo centrarlo. El código lo adapté asi:

Código:

body {
	background-color: #000;
	background-image: url(images/fondo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	margin:0px;
	padding:0px;
}
#linea {
	width: 100%;
	position: absolute;
	top: 50%;
	overflow: visible;
}
#container {
	background-image: url(images/fondohome.jpg);
	position: absolute;
	width: 1000px;
	height: 600px;
	top: -300px;
	left: 50%;
	margin-left: -500px;
}

Y funciona bien excepto por lo que dije anteriormente por el background del body.
Todo esto probado en chrome ie8 firefox, excepto en opera que si centro el background.

Pejigo · #30 (**permalink**) 30/03/2010, 19:39

Después de guerrear mucho con el código lo he conseguido!!!!!!!!!!!
Podéis mirarlo para ver si sobra alguna linea o falta. Y haber si os gusta el código.
Espero que le sirva de ayuda a alguien por que me ha costado lo suyo.

Código:

html, body{min-height:100%}
body {
	background-color: #000;
	background-image: url(images/fondo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	width:1000px;
	height:600px;
	margin: auto;
	padding: 0px;
}
#container {
	background-image: url(images/fondohome.jpg);
	position:absolute;
	left: 50%;
	top: 50%;
	width:1000px;
	margin-left: -500px;
	height:600px;
	margin-top: -300px;
	overflow:visible;
}