Bloguero-ec

Codigo Fuente, programación, Diseño Web

Imagen de fondo a pantalla completa con css…!!

julio 20, 2014
codigo-fuente,css,css3,efectos,galeria,javascript,jquery



Si lo que te has propuesto en mente es colocar un fondo de pantalla completa a tu web con una imagen o crear presentaciones de imagenes a pantalla completa, lo podrás realizar con css y su propiedad background-size.

Con esta propiedad podrás realizar el efecto deseado con tan solo colocar unas pequeñas propiedades que vamos a ver a continuación.

Ante que nada cabe recalcar que las propiedades de una imagen se pueden reescalar como se muestra a continuación…

Con una id y sus propiedades ajustables a manera que el usuario mas le convenga….

#capa{
    background:url('img.jpg') center center no-repeat;
    background-size:100px 150px;
}

Pero esta propiedad acepta el valor cover permitiendo colocar dentro del elemento a usar la imagen seleccionada de fondo de pantalla completo.

Para este demo vamos a utilizar como elemento html y colocaremos el background con su propiedad …

html{
    /* la imagen a ser mostrada a pantalla completa */
    background:url('imagen.jpg') no-repeat center center;

    /* nos aseguramos que el elemento ocupe toda la ventana del navegador */
    min-height:100%;

    /* Propiedad a utilizar para la imagen */
    background-size:cover;
}

La imagen se redimensionará a medida que la pantalla cambie el tamaño de la ventana….

Demostración

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: