Pequeño snippet de CSS para conseguir una web con una imagen de fondo a pantalla completa. La solución funciona en todo tipo de dispositivos, escritorio y móviles.
html, body { overflow: hidden; height: 100%;}
body {margin: 0; padding: 0; background: #ffffff url("bg.png") repeat-x 50% 50% / contain;}
El último parámetro de background, / contain, es background-size y define cómo se comporta la imagen en diferentes proporciones de pantalla. Dos valores interesantes son contain y cover.
Para centrar un elemento de unas dimensiones concretas, por ejemplo de 100px de alto y 200px de ancho, en el centro de la página podemos usar los siguientes atributos de CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Cómo maquetar texto en varias columnas con CSS. Básicamente las órdenes de CSS para controlar las columnas son cuatro: column-count que deternina el número de columnas, column-width su ancho, column-gap el espacio entre ellas y column-rule que define un borde entre columnas.
En CSS Newbie explican cómo asignan los navegadores el estilo por omisión a algunos elementos HTML, como el tamaño de los títulos, la separación entre párrafos o el estilo de los items de una lista. Luego dan unas reglas básicas para saltarse estos estilos de los navegadores, lo que se suele hacer reseteando estos estilos para inhabilitar las propiedades que fija cada navegador por sí mismo. Al final del artículo recogen dos ejemplos de reseteo de estilos: el reset.css de yahoo, y el del diseñador Eric Meyer.