Background 100%. 2 técnicas. Al viejo estilo 2.1 y el actual Css3 6.4.12
Background 100%. 2 técnicas. Al viejo estilo 2.1 y el actual Css3
Una de las cuestiones que cada 2x3 es objeto de consulta en foros y páginas de ayuda sobre Css es cómo lograr que una imagen utilizada como fondo (background) ocupe toda la caja sin distorsionarse ni dejando espacio sin cubrir.
A continuación dos formas de lograrlo, una a la vieja manera con Css2.1 y otra basada en las nuevas propiedades background de Css3.
El método de la vieja escuela
Css2.1 no provee herramientas para modificar el tamaño de una imagen colocada con la propiedad background-image (o con su forma acortada). Así que la solucción pasa por colocarla en el html vía la etiqueta img y hacer uso de otras propiedades que sí se encuentran en el nivel 2 de Css.
Todo pasa por colocar nada más abrir el body nuestra imagen, dentro de un contenedor para evitar que si utilizas el doctype xHtml strict y validas te salte un error por tener la imagen como hija directa del body.
<body>
<div id="fondo-imag">
<img src="imagen.jpg" alt="una imagen" />
</div>
<!-- Resto de la página -->
A continuación los estilos, comenzando con mi minireset preferido y preparando el campo (html y body) para que no haya sorpresas desagradables:
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
html, body {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
Y a continuación los propios de la imagen, y su contenedor, para lograr que ocupe toda la ventana:
#fondo-imag {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#fondo-imag img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Nota: el marco no cubierto en el ejemplo es debido al frame en que se muestran las realizaciones en jsfiddle.net
Fíjate en la relación de tamaños (anchuras/alturas) y los valores numéricos del posicionamiento (top/left...) No son casuales, así como en la propiedad position de la imagen y su contenedor.
Funciona perfecto, eso sí, a costa de añadir un div y una imagen en el html siendo sólo un recurso estético. Y sin perder de vista que el css necesario, sin ser excesivo, necesita declaraciones en tres selectores.
Si utilizas este método deberías tener presente el tamaño de la imagen. Demasiado pequeña y perderás calidad en ventanas grandes. Demasiado grande y su peso aumentará. También es importante que sopeses la relación ancho/alto.
El simple y moderno Css3: background-size: cover
Simple, sencillo, semántico y...
body {
width: 100%;
height: 100%;
background: url('imagen.jpg') 50% 50% no-repeat;
background-size: cover;
}
Nota: el marco no cubierto en el ejemplo es debido al frame en que se muestran las realizaciones en jsfiddle.net
Y eso es todo, amigos. Código simple, sencillo, semántico y... Css3. Esto es, a día de hoy necesitas añadir todos y cada uno de los prefijos privativos, además de no olvidar qué navegadores y sus versiones quedan excluidos.
Ahora ya puedes elegir. Opciones tienes.
Css3 background
En lo que preparo mi guía sobre el documento del W3c "CSS Backgrounds and Borders Module Level 3" recién publicado (Editor's Draft 5 Abril 2012) puedes consultarlo aquí.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Amigo, gracias por compartir los conocimientos, Tengo el problema que en Internet esplorer 11 la imagen de fondo no se me redimenciona, si achico la imagen para probarlo, el fondo hace lo mismo, el moz y el webkit si me funciona, pero con el explorer no se que hacer. Nuevamente gracias por su ayuda.
ResponderEliminarLo siento, Carlos. Pero sin tener acceso a la realización que da problemas es imposible hallar la raíz del malfuncionamiento y mucho más aún proponer soluciones.
EliminarDescarta que no estés utilizando propiedades o valores Css no soportadas.
canisue.com o cssvalues.com te serán de ayuda.
Un saludo
Me ha funcionado, mil gracias!! :-) Un saludo cordial.
ResponderEliminargracias me fue de ayuda el de css3
ResponderEliminarHola,
ResponderEliminarEn caso de wordpress o similares, donde al subir una imagen te queda un codigo similar a este:
< im g src="http:// www.sitio-y-nombre-dela-imagen . p ng" al t = "no mbre-imagen " wid th="199" height="201" c l a s s = " alignright size-full w p-i m a ge- 919" />
Podría editarlo para que fuera adaptable según dispositivo? (en dispositivos pequeños se aplasta horizontalmente hasta desaparecer)
Si es asi como seria el codigo? (los espacios sobrantes son para que me permita publicar)
Hola Marc
EliminarNo conozco lo suficiente WP ni la plantilla que estés usando como para poder evaluar el significado y finalidad de las clases que añade a la imagen.
Tampoco las dimensiones reales de la imagen.
Así que con toda la temeridad que ello conlleva me arriesgaré:
Si deseas usar esa imagen con el método "vieja escuela" deberías prescindir de todos los atributos (y sus valores) que pudieran interferir con las declaraciones css necesarias.
Si es con el "nuevo" vía background no importaría ya que sólo necesitas la dirección o url a la imagen.
Pero en todo lo anterior has de tener presente el tamaño y grado de comprensión de la imagen ("calidad") para evitar en según qué tamaños de viewport y tipo de pantalla (dispositivos de alta resolución y densidad de px) se vaya a visualizar.
Un saludo
Muchas gracias, simple y efectivo :)
ResponderEliminarEl de CSS3 es simple, sencillo y completamente funcional, muchas gracias :D
ResponderEliminargracias por la ayuda
ResponderEliminar