posicionar imagen fondo obtenida dinámicamente

arielcasanova · #1 (**permalink**) 10/02/2009, 14:13

Gente:
Tengo un cliente que quiere poder cambiar la imagen de fondo de su sitio. Sólo puedo pedirle que "recorte" la foto, no sabe nada de edición, o sea que el ancho puede variar cada vez. La imagen se obtiene de una db mysql, via php. En explorer, la imagen siempre queda en donde debe ir: a la derecha. Pero en FireFox, me queda a la izquierda, y no sé cómo solucionarlo.
Acá Van los códigos:

CSS:

Código:

#marco
{ 
   text-align:center;
   height:auto;
   width: 772px;
   margin:auto;
   border: 1px #FFF solid;
	margin-top:10px;
}
#contenedor
{ 
   width:771px; 
	height: 500px; 
	min-height: 500px;
	height: auto !important;
   margin: auto;
      background-color:#5F0415;
   text-align:center;
} 
#cabecera{ 
   width: 771px; 
   background-image:url(elementos/banner.jpg);
   height:137px;
} 


#botonera
{
padding-top:115px;
float: right;
margin:0;
}


#cuerpoindex
{
background-repeat:no-repeat;
width:771px;
text-align:left;
}
#botones
{
padding-top:31px;
float:left;
width:228px;
}

#thumbs
{
float:right;
margin-right:15px;
padding-top:7px;
}
.thumb
{
border: #999999 solid 1px;
margin-top:5px;
}

#contacto
{
padding-top:80px;
}

SALVEDAD PARA IE

Código:

#cuerpoindex
{
background-position-x:250px;
}

PAGINA (QUITÉ el código PHP)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Gradisca lenceria fina ropa interior algodon raso maternal señoras juvenil novias</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="keywords" content="lenceria fina algodon raso juvenil maternal señoras produccion artesanal venta mayorista">
<link href="estilos.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="estilosie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="estilosie.css" />
<![endif]-->
</head>


<body>
<div id="marco">
<div id="contenedor">
	<div id="cabecera">
		<div id="botonera">
			<a class="boto" href="index.php">Principal</a>			<a class="boto" href="institucional.php">Institucional</a>		
			<a class="boto" href="ubicacion.php">Dónde encontrarnos</a>		
<a class="boto" href="contacto.php">Contacto</a>		
			</div>
	</div>		
	<div id="cuerpoindex" style="background-image:url(elementos/index/<? echo $row['foto'];?>);height:<? echo $row['altura'];?>px;">

	<div id="botones">
		<a href="verano.php"><img src="elementos/boton1.jpg" alt="Colección primavera verano" border="0"/></a><br/>
		<a href="invierno.php"><img src="elementos/boton2.jpg" alt="Colección otoño invierno" border="0"/></a>
		<div id="contacto">
			<a href="contacto.php"><img src="elementos/contacto.jpg" alt="Belgrano 68 - 2º A - Bahía Blanca - [email protected]" border="0"/></a>		</div>
	 </div>
	<div id="thumbs">

 <div class='thumb'><a href='index2.php?id=".$row['id']."'><img src='http://www.gradisca.com.ar/thumbnail.php?x=90&y=90&file=elementos/index/".$row['foto']."' alt='foto de catálogo' border='0'/></a></div>
	</div>
	
	</div>
	<div id="pie">
	<span class="textopie">&copy; 2005 - 2008 Gradisca | <a href="http://www.emporia.com.ar" class="enlacepie" target="_blank">Dise&ntilde;o y Desarrollo: Emporia Dise&ntilde;o Web Estrat&eacute;gico</a></span>
	</div>
</div>
</div>

</body>
</html>

y si quieren verla... www.gradisca.com.ar

¿alguna idea de cómo resolver esto?

Mikmoro · #2 (**permalink**) 10/02/2009, 16:43

Supongo que lo que quieres hacer es algo como:

<div id="cuerpoindex" style="background:url(elementos/index/1223035872gradisca2.jpg) no-repeat top right;height:700px;">

arielcasanova · #3 (**permalink**) 11/02/2009, 05:15

Mikel: gracias por la ayuda, pero no me funciona. Primero no mostraba la imagen, así que decidí cambiar la sentencia por "background-position:top right; background-repeat:no-repeat; "; de este modo sí la muestra, pero completamente alineada a la derecha, y yo necesito que deje un espacio de unos 90 px, que es lo que ocupan los thumbs a la derecha.
Le agregué " margin-right:90px;" pero no hace caso. ¿Se te ocurre alguna otra cosa? La verdad es que yo no tengo idea.

gracias.

Mikmoro · #4 (**permalink**) 11/02/2009, 05:42

Estoy casi seguro de que no lo has escrito bien (copia y reemplaza el tuyo), porque esto te aseguro que funciona perfectamente:

<div style="background: url(elementos/index/1223035872gradisca2.jpg) no-repeat top right; height: 700px;" id="cuerpoindex">
(hay un espacio entre jpg) y no repeat que quizá no veas, así que copia y reemplaza).

Por otro lado, en tu primer mensaje dices:

Cita:

En explorer, la imagen siempre queda en donde debe ir: a la derecha.

y ahora replicas:

Cita:

de este modo sí la muestra, pero completamente alineada a la derecha

pues claro, ¿no era eso?

Pruébalo así:
<div style="background: url(elementos/index/1223035872gradisca2.jpg) no-repeat 260px 0; height: 700px;" id="cuerpoindex">
En FF debe funcionar, aunque no estoy seguro de qué ocurrirá en IE6.

arielcasanova · #5 (**permalink**) 11/02/2009, 05:56

En realidad, me expresé mal: en IE queda como yo quiero, a la derecha, excepto por un margen.
Si ves el sitio www.gradisca.com.ar ahora en IE verás como queda, que es como quiero que quede en FF.
Ahora pruebo lo que propones y te cuento.
Gracias!

arielcasanova · #6 (**permalink**) 11/02/2009, 05:57

En realidad... en IE el margen es a la izquierda, de 250, pero que en FF no me daba resultados.
(background-position-x:250px;)

He probado copiando y pegando el texto, puedes verlo en http://www.gradisca.com.ar/2index.php (revisa el código fuente, utilicé exactamente lo que me decis) pero no funciona...

Mikmoro · #7 (**permalink**) 11/02/2009, 06:24

¿Seguro que has copiado y pegado? Cómo me cabrean estas cosas. En tu código pone:

Cita:

y yo te he puesto:

Cita:

¿has copiado y pegado? busca la diferencia

arielcasanova · #8 (**permalink**) 11/02/2009, 06:52

joder! copié y pegué sólo la última fracción de código.
tenés razón
ahora pruebo y tecuento.

arielcasanova · #9 (**permalink**) 11/02/2009, 06:58

mikel, sos genial, funcionó a la perfección

disculpá por no haber puesto suficiente antención antes (lo que pasa es que como tenía que poner la imagen y el alto desde variables en php, no lo estaba haciendo correctamente).,

gracias por todo.

Mikmoro · #10 (**permalink**) 11/02/2009, 07:51

Muy bien, me alegro de que te haya funcionado.