Foros del Web » Creando para Internet » CSS »

posicionar imagen fondo obtenida dinámicamente

Estas en el tema de posicionar imagen fondo obtenida dinámicamente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/02/2009, 14:13
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
posicionar imagen fondo obtenida dinámicamente

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?
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #2 (permalink)  
Antiguo 10/02/2009, 16:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar imagen fondo obtenida dinámicamente

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;">
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 11/02/2009, 05:15
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: posicionar imagen fondo obtenida dinámicamente

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.
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #4 (permalink)  
Antiguo 11/02/2009, 05:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar imagen fondo obtenida dinámicamente

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 11/02/2009, 05:56
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: posicionar imagen fondo obtenida dinámicamente

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!
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #6 (permalink)  
Antiguo 11/02/2009, 05:57
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: posicionar imagen fondo obtenida dinámicamente

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...
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #7 (permalink)  
Antiguo 11/02/2009, 06:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar imagen fondo obtenida dinámicamente

¿Seguro que has copiado y pegado? Cómo me cabrean estas cosas. En tu código pone:
Cita:
<div id="cuerpoindex" style="background-image:url(elementos/index/1223035872gradisca2.jpg) no-repeat 260px 0;height:700px;">
y yo te he puesto:
Cita:
<div style="background: url(elementos/index/1223035872gradisca2.jpg) no-repeat 260px 0; height: 700px;" id="cuerpoindex">
¿has copiado y pegado? busca la diferencia
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 11/02/2009, 06:52
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: posicionar imagen fondo obtenida dinámicamente

joder! copié y pegué sólo la última fracción de código.
tenés razón
ahora pruebo y tecuento.
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #9 (permalink)  
Antiguo 11/02/2009, 06:58
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: posicionar imagen fondo obtenida dinámicamente

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.
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #10 (permalink)  
Antiguo 11/02/2009, 07:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar imagen fondo obtenida dinámicamente

Muy bien, me alegro de que te haya funcionado.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:39.