Fondo Expandido CSS

oNefl0w189 · #1 (**permalink**) 15/05/2012, 02:34

Buenos días,
tengo un pequeño problema, el caso es que necesito una imágen de fondo expandida para mi página web..

Tras buscar documentación al respecto y hacer unas cuantas pruebas he conseguido implementar la imagen de manera expandida y para todas las resoluciones (si redimensionas, la imagen también lo hace).

Lo hago de la siguiente manera.

html:

Código:

<html>

	<head>
	<title> HMDC </title>
	<link rel="StyleSheet" href="style.css" type="text/css" media="screen">
	
	</head>
	
	<body>
		<!-- Imágen de fondo Cargada a resolucion adecuada -->
		<img id="imagen_de_fondo" src="imagenes/fondo.jpg"></img>
		
		<!-- Contenido -->
			  <ul class="navegador">
				<li><a href="#">Opción 1</a></li>
				<li><a href="#">Opción 2</a></li>
				<li><a href="#">Opción 3</a></li>
				<li><a href="#">Opción 4</a></li>
			</ul>
		
		<!-- Pie de página -->
		
	</body>
	
</html>

css:

Código:

img#imagen_de_fondo {
        /* Rellenamos el fondo */
        min-height: 100%;
        min-width: 800px;
 
        /* Escalamiento proporcional */
        width: 100%;
        height: auto;
 
        /* Posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}
 
@media screen and (max-width: 800px) { 
/* Hacemos la búsqueda y si coincide modificamos las propiedades */
        img#imagen_de_fondo {
                left: 50%;
                margin-left: -400px;   
/* Agregamos un margen negativo que represente el 50% */
        }
}

Funciona perfecto, el problema viene ahora,

No consigo seguir maquetando mi página web, lo que escribo no aparece...
El caso es que al parecer la etiqueta <img> se come las cosas, es decir, que implementa la imagen por encima del resto de las cosas.

¿Como puedo solucionarlo?

Un saludo, y gracias.

IsaBelM · #2 (**permalink**) 15/05/2012, 05:15

se trata de usar z-index negativo

santaseo · #3 (**permalink**) 15/05/2012, 07:27

Me habia pasado lo mismo con una barra de menu fixed que al mover el scroll los absolute le pasaban por arriba, solucion: z-index positivo (en mi caso)

Saludos

kseso? · #4 (**permalink**) 15/05/2012, 09:32

La etiqueta img es de las consideradas vacías (como hr, br...), esto es, no puede alojar elementos en ella, sólo los atributos que lo son propios.

Por lo anterior se cierra en ella misma:

Código HTML:

Ver original<img src="http://www.forosdelweb.com/f53/fondo-expandido-css-993012/f53/fondo-expandido-css-993012/f53/fondo-expandido-css-993012/...." ... />

Fíjese como lo hace en su código:

Cita:

<img id="imagen_de_fondo" src="imagenes/fondo.jpg"></img>

Adenda:
Creo que la técnica que utiliza para su "imagen al 100%" es mejorable. (corregido enlace)
Con cualquiera de esas dos no debe preocuparse del tamaño de la ventana.

IsaBelM · #5 (**permalink**) 15/05/2012, 15:30

keseso? creo que te has equivocado de entrada. no te referirás a esta otra??

oNefl0w189 · #6 (**permalink**) 16/05/2012, 00:56

De primeras muchas gracias a los tres, lo he conseguido poniendo un z-index:-1 a la capa div del fondo, para que quede por detrás.

Pero tengo varios problemas;

1. He utilizado tu código kseso, tras borrar un par de lineas para evitar que me saliese ya de primeras el scroll horizontal he comprobado que ahora redimensionando la página y haciendola más pequeña no me sale el scroll tampoco.. :S

[Aclaro: No me sale el scroll con mozilla, pero si con otros navegadores.]

2. Este código no funciona bien con IExplorer6 y la verdad es que necesito que se vea bien en ese navegador...

El caso es que la página es una pagina sencillota total, con cuatro links y un par de imágenes, pero necesito que sea soportada desde Ie6 en adelante, pues los usuarios en su mayor parte tienen este navegador.

Os dejo el código:

Código:

html, body {
        height: auto !important;
        height: 100%;
}


div.fondo-imag {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
		z-index:-1;
}
div.fondo-imag img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Un saludo,
y muchas gracias.

kseso? · #7 (**permalink**) 16/05/2012, 03:08

Cita:

Iniciado por IsaBelM

keseso? creo que te has equivocado de entrada. no te referirás a esta otra??
Efectivamente, hubo un error en el enlace. Gracias

Cita:

Iniciado por oNefl0w189

De primeras muchas gracias a los tres, lo he conseguido poniendo un z-index:-1 a la capa div del fondo, para que quede por detrás. <-- si respeta el orden de aparición del elemento en el html no sería necesario (no entraremos ahora en el tema de qué significa y respecto a qué es el valor negativo en el apilamiento)

Pero tengo varios problemas;

1. He utilizado tu código kseso, tras borrar un par de lineas para evitar que me saliese ya de primeras el scroll horizontal he comprobado que ahora redimensionando la página y haciendola más pequeña no me sale el scroll tampoco.. :S <-- obviamente no es [s]mi[s] el código del ejemplo el que genera el scroll. Sin entrar en explicaciones, basta con ver el ejemplo. Así que será producto del resto del código utilizado (que desconocemos).

[Aclaro: No me sale el scroll con mozilla, pero si con otros navegadores.]

2. Este código no funciona bien con IExplorer6 y la verdad es que necesito que se vea bien en ese navegador... <-- Lógico. Ni el basado en Css 3 (sin más comentarios) y el realizado con Css2.1. Está basado en la propiedad fixed. Deberá entonces simular dicho valor (pase por araudi.net)

El caso es que la página es una pagina sencillota total, con cuatro links y un par de imágenes, pero necesito que sea soportada desde Ie6 en adelante, pues los usuarios en su mayor parte tienen este navegador. <- pues tiene un serio problema. Desconozco el target de su página, pero siendo de España ya me cuesta creerlo.

Os dejo el código:

Código:

html, body {
        height: auto !important;
        height: 100%; /* ha borrado código */
}


div.fondo-imag {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
		z-index:-1;
}
div.fondo-imag img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

<--Con este código, por incompleto (falta css restante y todo el html) no se puede diagnosticar nada. Publique un enlace a la página o al menos el suficiente código como para poder reproducir el problema.
Un saludo,
y muchas gracias.

oNefl0w189 · #8 (**permalink**) 16/05/2012, 06:13

@kseso Me pasaré por araudi.net, que ahora ando liadete en el trabajo. Que sección de esa página es de la que me hablas?

El Target es el de mi empresa, una INTRANET sin acceso a internet, los usuarios no tienen derechos para instalar programas, entonces algunos PC'S tienen el explorador viejo IE6, sin embargo otros cuentan con versiones superiores de IE, mozilla o chrome.

Es por eso, que necesito soporte para ese navegador.

Un saludo,
gracias.

kseso? · #9 (**permalink**) 16/05/2012, 11:01

¿Cuántos ordenadores nuevos necesita entonces para poder renovar/actualizar el explorador? xD

Sólo entre en ella, ahí ya lo verá.