Foros del Web » Creando para Internet » CSS »

Fondo fijo y proporcionado

Estas en el tema de Fondo fijo y proporcionado en el foro de CSS en Foros del Web. Hola, como extensión de mi tema http://www.forosdelweb.com/f53/rueda...pagina-743639/ vuelvo a la carga porque quiero hacer el código más simple pero que funcione. En esta página hay ...
  #1 (permalink)  
Antiguo 05/11/2009, 09:17
Avatar de Batusai  
Fecha de Ingreso: enero-2005
Ubicación: Málaga -Andalucía- España
Mensajes: 130
Antigüedad: 12 años, 11 meses
Puntos: 1
Fondo fijo y proporcionado

Hola,

como extensión de mi tema http://www.forosdelweb.com/f53/rueda...pagina-743639/ vuelvo a la carga porque quiero hacer el código más simple pero que funcione.

En esta página hay un ejemplo que no logro repetir en esta otra. Si os fijais la imagen de fondo se ve cortada por abajo. La imagen de fondo es: http://www.mybidic.es/shop/images/fondopalmeras.jpg

El código insertado es:
[CODE="CSS"]
* {margin:0; padding:0;}
html, body {
width:100%;
height:100%;
overflow:hidden;
}

#todo{
width:100%;
height:100%;
color: #f00;
overflow: auto;
background: url(../images/fondopalmeras.jpg) no-repeat top left;
}

#container {
margin: 0px auto;
width:800px;
height:833px;
margin-bottom:200px;
/* background-color:#000000; */
}
#interior {
position: relative;
border:solid 1px #777;
width:800px;
height:100px;
background-color:#2d2d2d;
}
[/CODE]
Y en la página tengo esto:
[CODE="HTML"]
<body id="interior" class="interior">
<div id="todo">
<div id="container">

<link href="css/shop.css" rel="stylesheet" type="text/css" />

<div id="contenido">
...

[/CODE]

¿Podría alguien ayudarme a dejar la foto de fondo completamente ajustada a todos los márgenes?

Muchas gracias de antemano.

P.D.: Supongo que habreis notado que salta un aviso de malware insertado en el código de esta página. Espero que lo elimineis pronto. A mí me pasó hace un par de meses y tuve que limpiar todos los archivos y cambiar la contraseña del FTP.
  #2 (permalink)  
Antiguo 06/11/2009, 06:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo fijo y proporcionado

Hola Batusai
Eso te ocurre porque estás aplicando el fondo a la caja que no es.

Si te fijas en el ejemplo de Mikmoro, el fondo está en el "html, body" y posicionado abajo y a la izquierda.

Tú lo colocas a una caja y sin definir posición (y por defecto es arriba y a la izquierda).

Cambia el fondo de las palmeras a:
Código css:
Ver original
  1. html, body {
  2. background: transparent url(../img/bloque.png) no-repeat left bottom;
  3. height:100&#37;;
  4. overflow:hidden;
  5. width:100%;
  6. }

Aunque también bastaría con que le añadas a tu código
Código css:
Ver original
  1. #todo {background: transparent url(../img/bloque.png) no-repeat left bottom;
  2. }
siempre que no añadas nada más fuera de esa caja.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 06/11/2009, 08:31
Avatar de Batusai  
Fecha de Ingreso: enero-2005
Ubicación: Málaga -Andalucía- España
Mensajes: 130
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Fondo fijo y proporcionado

Mucho mejor ahora: http://www.mybidic.es/shop/index.htm Me funciona la solución de poner la imagen de fondo en el HTML,body porque si la pongo en la capa que abarca todo se ve muy desplazada hacia abajo, como 500px

Muchas gracias por la respuesta. Ya casi está perfecto. Pero hay un detalle que me preocupa: la foto es de 1260px de ancho, y mi pantalla tiene una resolución de 1280px de ancho, por lo que se quedan 20px a la derecha, en blanco. Es decir, el fondo NO se adapta a las dimensiones ni resolución del navegador/PC del visitante.
Cuando uso una resolución menos no hay problema, pero, ¿y si alguien mira la página con una resolución mayor? Se vería fatal.

¿Cómo podría solucionar eso?
  #4 (permalink)  
Antiguo 06/11/2009, 08:34
 
Fecha de Ingreso: noviembre-2008
Ubicación: Jerez
Mensajes: 23
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Fondo fijo y proporcionado

buscate una imagen de mas tamaño amigo
  #5 (permalink)  
Antiguo 06/11/2009, 08:39
Avatar de Batusai  
Fecha de Ingreso: enero-2005
Ubicación: Málaga -Andalucía- España
Mensajes: 130
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Fondo fijo y proporcionado

Cita:
Iniciado por nand0 Ver Mensaje
buscate una imagen de mas tamaño amigo
Pregunto por una solución más o menos simple y sintácticamente correcta. Conozco una solución "engorrosa" y no estandarizada, que es esta, pero hay que marear mucho el código. Por eso consultaba si algún gurú podría ayudarme.
  #6 (permalink)  
Antiguo 06/11/2009, 08:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo fijo y proporcionado

En la misma página www.araudi.net tienes algún ejemplo de fondo "adaptado". Y la solución pasa por otro enfoque.

Como fondo colocado vía css no podrás redimensionar la imagen (utilizando css2)

Otra forma es hacer un degradado para que tu imagen termine en los dos laterales en un color sólido y en css declarar el background como:

Cita:
background: #tucolorsolido url(tuimagen.jpg) no-repeat 50% bottom;
Siempre que tu página esté centrada en la ventana.

Personalmente me gusta más esta última forma, pues evita distorsiones en la imagen.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 09/11/2009, 17:26
Avatar de Batusai  
Fecha de Ingreso: enero-2005
Ubicación: Málaga -Andalucía- España
Mensajes: 130
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Fondo fijo y proporcionado

Lo del degradado no podrá ser, creo. Lo que me extraña es que la imagen no se amplíe o contraiga según la resolución del navegador/monitor.
  #8 (permalink)  
Antiguo 10/11/2009, 12:56
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Fondo fijo y proporcionado

Hola:

Mira este ejemplo, a lo mejor te sirve de ayuda.

Saludos.

  #9 (permalink)  
Antiguo 10/11/2009, 20:11
Avatar de Batusai  
Fecha de Ingreso: enero-2005
Ubicación: Málaga -Andalucía- España
Mensajes: 130
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Fondo fijo y proporcionado

hola,

gracias por responder. La verdad es que justamente en el otro tema del que hablaba en mi primer mensaje usé en parte el código que me dices de esa página del "conejo de fondo" pero me lié un poco y mi código era muy redundante y contradictorio.

Esta mañana conseguí aplicarlo de forma más sencilla, y parece que funciona.

Ahora estoy intentando aplicarlo al fondo de una plantilla en phpBB3, aún sin éxito completo. Se queda una franja a la izquierda más o menos de la mitad del ancho que tiene el "margen" de estos foros. Quizá haya un margin-left o un padding en algún sitio que me está dando el problema.

Muchas gracias por responder
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 20:50.