EN LÍNEA
Actualmente hay 0 usuarios y 4 invitados en línea.
USUARIO

Sitio elaborado con Drupal, un sistema de gestión de contenido de código abierto
CSS: Doble fondo (Dos imágenes como fondo)
Escrito por: McO | Categoría:

Tenemos una imágen X y queremos centrarla, pero que sea acoplable en caso la página se estire horizontalmente o no queremos usar una imágen grande para no consumir memoria.

¿Cómo hacemos? Undecided

Primero evaluemos: La imagen es muy grande si queremos coger los dos extremos a la vez y consume un mínimo de memoria pero consume algo, en cambio si tienes una imagen de 1 píxel de ancho no consumiría casi nada por no decir nada, pero el detalle es que por un extremo izquierdo la imágen es una y por el derecho es otra la solución es la siguiente:

Cortamos una imágen de 1 píxel a lo mucho (depende de ti el ancho), y la otra de otro pixel, como se muestra en la imagen.

 

Primero para el contenedor de la web <DIV> le colocamos lo siguiente:

  #s_all{

    position:relative;

    margin:0px auto;

    width:780px;

    z-index:1;

  }

Y creamos dos <DIV> uno que estará ante del <div id="s_all"></div> que contiene toda la web y otro al final. Para el primero, tomará el lugar de la imágen izuiqerda:

  .fond-left{

    position:absolute;

    top:0px;

    left:0px;

    width:750px;

    height:100%;

    background:url(../img/fond1.jpg) repeat-x;

    z-index:0;

  }

Para el segundo, tomará el lugar de la imagen derecha:

  .fond-right{

    position:absolute;

    top:0px;

    right:0px;

    width:750px;

    height:100%;

    background:url(../img/fond2.jpg) repeat-x;

    z-index:0;

  }

De esta manera generamos un DIV por debajo de la web que siempre estará al lado izquierdo con la imágen correspondiente y otro DIV por debajo de la web que siempre estará al lado derecho. Wink

 

Nota: Se recomienda de igual forma poner una imágen de fondo de 1 píxel al <BODY> en caso la ápagina se exteri sobre manera aunque es poco probable o el contenedor de la página deje un espacio superior "MARGIN-TOP". Espero quee ste tips les sirva a algunos. Wink