Imagen background, estirada... -Novato-

djwarez · #1 (**permalink**) 27/01/2007, 10:44

Hola...

Esete es el primer postp por aca, bueno, sucede que inicio con esto de los estilos y me acabo de ver un layer que es este, y como veran es liquido y eso e slo que quiero, pero quiero ponerle unaimagen de fondo, he leido algunos tutos y según estos debo usar background, corriganme porfavor si me equivoco, pero mi pregunta es ¿Como le hago para que mi imagen se estire

??

De antemano mil gracias,

es para una pagina de un grupo religioso...

Syncime · #2 (**permalink**) 27/01/2007, 18:35

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:

Código:

body {
    margin: 0px;
}

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

Mikmoro · #3 (**permalink**) 27/01/2007, 18:37

Si la pones como background tu imagen no se estirará; se quedará inmutable. La única manera de que se pueda estirar es poniendo la imagen directamente en el div contenedor y dándole a la imagen un width de 100% (o el porcentake que quieras) y al height lo mismo.

Mikel.

djwarez · #4 (**permalink**) 27/01/2007, 19:29

Gracias por las respuestas, y gracias Syncime por el tuto y trabajo realizado, me quedo clarisimo...

(Ya te pongo tus puntos de reputación jejeje)