Cuando se coloca una imagen de fondo en el blog, son muchos los que se sorprenden al ver que no es lo suficentemente grande para abarcar todo el espacio disponible de la pantalla.
Por lo general, usamos la etiqueta body para colocar ese fondo y hay tres definiciones básicas
background: #COLOR url(URL_IMAGEN) no-repeat 50% top;
si la imagen es única (no se repite) y la centramos horizontalmente
background: #COLOR url(URL_IMAGEN) repeat-y left top;
si la imagen es un mosaico que se repite hacia abajo
background: #COLOR url(URL_IMAGEN) repeat left top;
si la imagen es un mosaico que se repite en todas direcciones
Cuando usamos background con la palabra no-repeat, salvo que usemos una imagen de un tamaño casi infinito, esta, jamás cubrirá toda la pantalla porque las resoluciones de los monitores varían. Por eso es que se la propeidad tiene la opción #COLOR donde le decimos al navegador que, el resto de la ventana, todo eso que la imagen de fondo no alcance a cubrir, debe ser rellenado con un color determinado.
Esto es así porque en principio, esa imagen no puede ser redimensionada para que se acomode al total de la pantalla ... aunque, en realidad, esto no es cierto ya que hay métodos para hacerlo.
En CSS Tricks hay varias alternativas; algunas, implican el uso de JavaScript, otras no.
De todos ellos, hay uno que me pareció el más sencillo de implementar porque requiere hacer pocas modificaciones en una plantilla normal y parece funcionar bien tanto en Internet Explorer como en Firefox.
Para implementarlo sólo se requiere definir algo así dentro del CSS:
Por lo general, usamos la etiqueta body para colocar ese fondo y hay tres definiciones básicas
background: #COLOR url(URL_IMAGEN) no-repeat 50% top;
si la imagen es única (no se repite) y la centramos horizontalmente
background: #COLOR url(URL_IMAGEN) repeat-y left top;
si la imagen es un mosaico que se repite hacia abajo
background: #COLOR url(URL_IMAGEN) repeat left top;
si la imagen es un mosaico que se repite en todas direcciones
Cuando usamos background con la palabra no-repeat, salvo que usemos una imagen de un tamaño casi infinito, esta, jamás cubrirá toda la pantalla porque las resoluciones de los monitores varían. Por eso es que se la propeidad tiene la opción #COLOR donde le decimos al navegador que, el resto de la ventana, todo eso que la imagen de fondo no alcance a cubrir, debe ser rellenado con un color determinado.
Esto es así porque en principio, esa imagen no puede ser redimensionada para que se acomode al total de la pantalla ... aunque, en realidad, esto no es cierto ya que hay métodos para hacerlo.
En CSS Tricks hay varias alternativas; algunas, implican el uso de JavaScript, otras no.
De todos ellos, hay uno que me pareció el más sencillo de implementar porque requiere hacer pocas modificaciones en una plantilla normal y parece funcionar bien tanto en Internet Explorer como en Firefox.
Para implementarlo sólo se requiere definir algo así dentro del CSS:
html, body {
background-color: #COLOR;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#outer-wrapper {
.......
background-color: #COLOR;
position: relative;
z-index: 2;
}
#imagenfondo {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}Y colocar lo siguiente, justo después de <body>:
<div>
<img id="imagenfondo" src="URL_IMAGEN"/>
</div>
- En este ejemplo, la imagen de fondo tiene 900x675
- En este ejemplo, la imagen de fondo tiene 800x600
- En este ejemplo, la imagen de fondo tiene 500x450
En todos los casos, la imagen de fondo se redimensiona para ocupar el 100% de la ventana del monitor pero con dos inconvenientes. Si la página a mostrar tiene un scroll (es más alta que la pantalla) al ir hacia a abajo, la imagen no se redimensionará así que el fondo quedará en blanco o con el color definido en el body (ver ejemplo).
El segundo punto en contra es más subjetivo: no hay ninguna imagen que pueda adaptarse a cualquier tamaño. Aún cuando se pudieran ampliar sin deformarse, perderán definición y por lo tanto, el resultado será bastante mediocre.
El segundo punto en contra es más subjetivo: no hay ninguna imagen que pueda adaptarse a cualquier tamaño. Aún cuando se pudieran ampliar sin deformarse, perderán definición y por lo tanto, el resultado será bastante mediocre.
0 comentarios:
Publicar un comentario