Photoshop y Tutoriales

Iremos explorando el HTML5 y el nuevo CSS3, entre ambos se están convirtiendo en el nuevo estándar para diseño de páginas web y está siendo utilizado en proyectos web cada vez más, asi que empezaremos una nueva serie de tutoriales para conocer las bondades del html5 y css3.

No cabe duda que estos nuevos estándares están revolucionando la forma en que presentamos los proyectos al cliente, cada vez tenemos sitios más interactivos, interesantes y páginas web más livianas (esto le encanta a Google).

Lo mejor de todo es que con HTML5 y CSS3 podemos desarrollar interesantes páginas web con llamativos efectos de movimiento sin utilizar Flash o muy poco Javascript, si acaso nada.

En este tutorial veremos una de las características más interesantes del CSS3, el fondo de una página web o Background. En esta oportunidad veremos como agregar un fondo a una página web y que la misma quede del mismo tamaño sin que el Zoom aplicado a la ventana le afecte.

El valor que veremos es “cover”, que es una nueva propiedad del CSS3 que permite que una imagen abarque el total de la pantalla o ventana (en el caso que la utilices para un DIV).

Normalmente, aplicamos el background al BODY con NO-REPEAT, el problema es que al aplicar ZOOM a la pagina web el contenido se hace más grande (textos más legibles) pero la imagen tambien, así que se lo aplicaremos a una DIV, utilizando el siguiente codigo (haz clic en la imagen para ampliar)

El problema al hacerlo como lo he hecho, es que la imagen se aplica a la DIV y efectivamente cuando hago Zoom la imagen se hace mas grande también, pero eso no es lo que quiero, lo que necesito, al menos para este tutorial es que la imagen quede en el fondo, sin aplicarlo directamente al BODY (porque pierde el efecto), para ello hago unos ajustes en el código.

Los primero que voy a hacer es crear una nueva clase que contenga la imagen y pas propiedades para que esta se quede en su posición, BG-PROPERTIES:FIXED es la propiedad que utilizamos en CSS normalmente, pero mejor mira la imagen para que veas el codigo completo:

El z-Index lo he dejado en 10, para que quede dentro de la página, pero esto quiere decir que el resto de elementos deben tener un Z-INDEX mayor.

Luego de esto, he creado una nueva ID que es la que utilizaré para mostrar el contenido de la página, en este caso es un texto DUMMIE con color de fondo blanco para que destaque del fondo y se entienda que es contenido.

Lo interesante de esta ID que he llamado contenido por razones obvias, es que la capa que lo contiene quedará flotando, puedes jugar con los valores de MARGIN yo los he dejado en 0 AUTO, pero si los cambias a 50% AUTO se desplegará la barra de desplazamiento horizontal y podrás mover la capa hacia abajo y hacia arriba, si lo dejas en 0 50% sucederá lo mismo pero con la barra de desplazamiento horizontal, el “cuanto” se mueva va a depender del tamaño de la imagen que utilizaste.

Recuerda que la imagen está centrada horitontal y verticalmente, por lo que no se moverá.

Se me olvidaba lo más importante ¿Dónde coloco la Capa que contiene la imagen de fondo?, justo encima de todo el CSS, onclusive encima de la estiqueta SCRIPT, a continuación te dejo el código completo, recuerda hacer clic en la imagen para verla en Full size:

Puedes ver el Ejemplo del tutorial, haz clic derecho ver codigo fuente para que tengas acceso al código por si lo quieres utilizar en algún proyecto.

Si te ha gustado el tutorial html5 y css3 para trabajar con imagenes de fondo para paginas web compártelo en Twitter o Facebook, y si lo haces en G+ se agradece también. Aunque no es obligatorio un enlace directo a este tutorial se agradece si decides publicarlo en tu blog o en algun foro.

Te podria interesar:

1. Insertar fondo en página web y centrar la imagen de background con CSS
2. Plantilla gratis HTML5 + CSS3
3. ¿Cómo ajustar el fondo de mi página web a un tamaño fijo?
4. Plantillas HTML5 + CSS3 gratis
5. 15 ejemplos de formularios hechos con CSS3

Tags: css3, diseño, html5, pagina web, propiedad cover css3, tutorial css3, tutorial html5