Foros del Web » Creando para Internet » CSS »

Imagen background, estirada... -Novato-

Estas en el tema de Imagen background, estirada... -Novato- en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2007, 10:44
Avatar de djwarez  
Fecha de Ingreso: diciembre-2005
Ubicación: Colima México
Mensajes: 1.219
Antigüedad: 12 años
Puntos: 5
Pregunta Imagen background, estirada... -Novato-

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...
__________________
"I miss you so. Wath I Do...?"
www.djwarezweblog.com
  #2 (permalink)  
Antiguo 27/01/2007, 18:35
 
Fecha de Ingreso: enero-2007
Mensajes: 27
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Imagen background, estirada... -Novato-

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
  #3 (permalink)  
Antiguo 27/01/2007, 18:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Imagen background, estirada... -Novato-

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.
  #4 (permalink)  
Antiguo 27/01/2007, 19:29
Avatar de djwarez  
Fecha de Ingreso: diciembre-2005
Ubicación: Colima México
Mensajes: 1.219
Antigüedad: 12 años
Puntos: 5
Sonrisa Re: Imagen background, estirada... -Novato-

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)
__________________
"I miss you so. Wath I Do...?"
www.djwarezweblog.com
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 00:46.