Skip to main content

Imagen de fondo fija y escalada a la ventana

Si queremos poner como fondo de nuestra página web una imagen que ocupe toda la ventana del navegador, y que esta este fija de modo que no haya barras de desplazamiento, podemos usar las siguientes propiedades CCS3. Por ejemplo al body.

background-image:url(http://url/img.png);

background-repeat: no repeat;
background-attachment: fixed;
background-position: center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

En navegadores que no sporten CSS3 podría no verse correctamente.

Vídeo tutorial de desarrollo web de Raymicha

En vimeo se encuentran verdaderas maravillas. Un ejemplo es esta cadena de videos que conforman un tutorial de creación de una página web partiendo de una plantilla de photoshop. La autora @raymicha utiliza un lenguaje sencillo y conciso pasando por las etapas para comprender el proceso de creación.

No incrusto los vídeos ya que es mejor ir a al sitio de vimeo para poder verlos en la máxima calidad. Se pueden seguir los enlaces siguientes:

Muy instructivo.

Qué es el CSS reset

El CSS Reset es una práctica de diseño que trata de solventar la divergencia en la presentación de páginas web que hay entre diferentes navegadores. Aunque hay un estándar cada fabricante de navegador puede definir valores distintos a algunas de estas propiedades CSS. Esta inconsistencia provoca que una página web se vea distinta entre navegadores.

Para evitar esto, antes de añadir nuestro diseño se ponen a un valor inicial las propiedades css, para comenzar el diseño desde una base común.

Uno de los códigos más usados es el de Eric Meyer que podemos ver en el siguiente fragmento de código:

 

La idea del css reset es un interesante tema de debate entre abundantes posturas, incluso entre aquellos que están completamente en contra de usar esta práctica.