Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Jul 18, 2012 in Trucos | 2 comments

Colocar una imagen como fondo de la página

El fondo de la página o de una sección de la página, puede ser una imagen u un simple color.

Para que el fondo sea una imagen, naturalmente que es necesario hacer una imagen que se ajuste a nuestras necesidades, y luego definir esta propiedad en el archivo CSS.

Si queremos que el fondo de la página sea una imagen, en la etiqueta body de nuestro archivo CSS colocamos lo siguiente:

body {

background: #FFFFFF url(images/fondo.jpg) no-repeat;

}

Como se observa en la parte del código resaltado en negrilla, se debe colocar el nombre de la imagen que hemos seleccionado como fondo, y debemos fijar la ruta en la cual se encuentra la imagen.

Si estamos trabajando en WordPress, colocamos la ruta relativa, pero si trabajamos en un diseño propio, es mejor fijar la ruta completa o absoluta, es decir url(http://www.miblog.com/images/fondo.jpg).

El fondo de la página está dado en primer lugar por un color [FFFFFF] y luego por la imagen, de modo que el navegador mostrará la imagen como fondo, y si no encuentra la imagen, mostrará el color que se ha fijado junto a la imagen que en el ejemplo corresponde al color blanco.

Ahora, si usted tiene un diseño con una imagen de fondo y quiere colocar un color de fondo, elimina la url de la imagen y sólo deja el color: background: #FFFFFF;

Igual procedimiento se sigue con cada sección de la página a la que se quiere colocar una imagen de fondo.

Si queremos colocar una imagen de fondo a la sección de novedades de nuestro Blog, el código sería algo así:

#novedades {

background: #FFFFFF url(images/novedaes.jpg) no-repeat;

}

El uso de imágenes es muy amplio y se pueden lograr diseños excelentes jugando con la ubicación y efectos de la imagen, para lo cual hay que conocer bastante de CSS.

Posteriormente iremos tratando otros trucos y efectos sobre el manejo de imágenes y CSS.

2 Comentarios

  1. Hola, he intentado colocar una imagen de fondo en una página especifica de mi página en wordpress y no funciona, coloco el código para analizarlo.

    /* =BODY
    ———————————————– */
    body {

    #venus {
    background: #FFFFFF url(http://www.dibanksdesign.com/wp-content/uploads/2015/06/fondoheitman2.png) no-repeat;
    }
    padding-top: 15px;
    padding-bottom: 15px;

    }

    #page {
    max-width: 1180px;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    border-top: 3px solid #77CC6D;
    }

    .wide {
    padding-top: 0;
    padding-bottom: 0;
    }
    .wide #page {
    max-width: 100%;
    }
    .inner-wrap {
    margin: 0 auto;
    max-width: 1100px;
    }

    • Muy buenos días, Hebert

      El código que recomendamos en el artículo de Digitalsite.co es para colocar una imagen de fondo en todo el sitio en general, si requieres colocar la imagen en una sola página especial de tu sitio se requiere usar condicionales en php para que dependiendo de id de la página se cargue un css diferente.

      Saludos!

Publicar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *