Hola djwarez,
Es posible hacer lo que vos queres, me refiero a estirar la imagen, pero en este caso no se utiliza la propiedad CSS1,
background-image.
Para realizarlo tendrás que utilizar propiedades de CSS2 y la más importante para que funcione, es una llamada
z-index. También hay que usar
position y
height.
Pasada la teoría, vamos a la práctica.
Lo primero que tenés que hacer es si o si, declarar la propiedad
body de la siguiente manera:
Es muy importante que diga
"margin: 0px" ya que sin ello no se verá bien el fondo al estirarse. Puedes agregar más declaraciones, pero la nombrada anteriormente tiene que estar.
Lo siguiente es crear un
div donde aplicarás la imagen de fondo. Para ello, en tu hoja CSS debes agregar lo siguiente:
Código:
#fondoestirado {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
}
Cada una de las propiedades es importante, por eso no borres ninguna.
Ahora, para que la imagen se estire, tendrás que también agregar esto:
Código:
#fondoestirado img {
width: 100%;
height: 100%;
}
Lo último que hay que crear, es otro
div donde irá todo el contenido del sitio. No importa si dentro de él hay más
div, tablas, imágenes o cualquier otro tipo de contenido, pero tendrá que estar dentro del mismo.
Código:
#contenedorgeneral {
z-index: 1;
position: absolute;
}
Ya con todas las declaraciones realizadas en tu hoja de estilos, dentro de la hoja HTML tendrás que hacer algo así:
Código HTML:
<html>
<head>
<title>Título de la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="fondoestirado">
<img src="URL-de-la-imagen-a-estirar" alt="" />
</div>
<div id="contenedorgeneral">
<!-- Acá tiene que ir todo el contenido de tu sitio -->
</div>
</body>
</html> Aplicando el
layout que vos has seleccionado quedaría así:
Código HTML:
<html>
<head>
<title>Título de la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="fondoestirado">
<img src="URL-de-la-imagen-a-estirar" alt="" />
</div>
<div id="contenedorgeneral">
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<b>Content Column: <em>Fluid</em></b>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<b>Left Column: <em>200px</em></b>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html> Espero que te haya servido.
Dicho sea de paso, el código que he creado es válido
XHTML 1.0 Transitional ya que es el mismo que utiliza el
layout que tu has elegido. Me falta la declaración
DOCTYPE, pero como soy usuario nuevo, me lo toma como si fuera un enlace y no me deja agregarlo.
Saludos