, que encierra el contenido de la página */ #wrapper { width: 100%; max-width: 980px; margin: 0 auto; background-image: url(../logoCB.jpg); background-image: url(../registro.jpg.jpg); background-size: contain; background-repeat: no-repeat; background-color: #B4C4BA; } /*Esto define el ancho del wrapper al 100%, con un máximo de 980 pixeles. Los márgenes horizontales son automáticos. Como resultado, la página rellena el ancho completo de teléfonos y tabletas, pero se hace de un ancho fijo al centro, en pantallas mayores a 980 pixeles. La imagen de fondo es de 480 pixeles de ancho, pero la propiedad CSS3 background-size se ha definido como: contain. Esto, escala la imagen de background al tamaño requerido de ancho y alto sin distorsión para rellenar el fondo. */ .floatleft, .floatright { width: 95%; max-width: 400px; display: block; margin: auto auto 1.5em; } /* La siguiente regla de estilo de interés, es para las clases floatleft y floatright, que son aplicadas a las imágenes indentadas. Se ve de esta manera: Ajustar el ancho de una imagen en CSS, sobre escribe el ancho en la etiqueta HTML. Como resultado, en pantallas pequeñas, las imágenes se re-escalan al 95% del ancho de elemento que las contiene. En la página de ejemplo, ambas imágenes son de 400 pixeles de ancho, así que la propiedad max-width previene que se desplieguen a un mayor tamaño del original. Obviamente, si tu diseño contiene imágenes de diferentes tamaños, vas a necesitar varias clases para manejarlas. Las imágenes flotarán en pantallas grandes, pero las reglas básicas ajustan la propiedad display a block y los márgenes horizontales a auto– en efecto, centrando las imágenes en la página. */