Fondo fijo y proporcionado

Batusai · #1 (**permalink**) 05/11/2009, 09:17

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.

kseso? · #2 (**permalink**) 06/11/2009, 06:06

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 originalhtml, body {
background: transparent url(../img/bloque.png) no-repeat left bottom;
height:100&#37;;
overflow:hidden;
width:100%;
}

Aunque también bastaría con que le añadas a tu código

Código css:

Ver original#todo {background: transparent url(../img/bloque.png) no-repeat left bottom;
}

siempre que no añadas nada más fuera de esa caja.

Un saludo

Batusai · #3 (**permalink**) 06/11/2009, 08:31

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?

nand0 · #4 (**permalink**) 06/11/2009, 08:34

buscate una imagen de mas tamaño amigo

Batusai · #5 (**permalink**) 06/11/2009, 08:39

Cita:

Iniciado por nand0

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.

kseso? · #6 (**permalink**) 06/11/2009, 08:45

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

Batusai · #7 (**permalink**) 09/11/2009, 17:26

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.

jomaruro · #8 (**permalink**) 10/11/2009, 12:56

Hola:

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

Saludos.

Batusai · #9 (**permalink**) 10/11/2009, 20:11

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