0imágenes de fondo para los sitios web que responden

Recientemente he estado actualizando mis sitios web y el servidor web y la adición de un nuevo sitio (LoveCrete.org). Yo quería tener una imagen de fondo en LoveCrete y se dio cuenta de que, por supuesto, 1 talla no sirve para todas las pantallas. Here is a sum­mary of what my think­ing was and what I did to cater for the numer­ous screen sizes and orientations.

¿Qué orientación

Empecé haciendo un poco de mi tabla de todos los acuerdos comunes que se utilizan en PCs y tabletas (en la orientación horizontal). Decidí centrarme en esto porque la mayoría de las imágenes están disponibles en el paisaje por lo que este es un lugar razonable para empezar.

Yo decidí que iba a colocar las imágenes en el centro de la página y dejar que los bordes se perderán por el borde de la pantalla en algunos casos. Cuando un teléfono se utiliza en orientación vertical se carga la imagen basada en la altura (no ancho) y perderá una gran cantidad de ambos bordes de la imagen. Hacerlo de otra manera significaría necesidad de imágenes recortadas de una forma totalmente diferente o tener una imagen de paisaje “baldosas” en una pantalla de altura, que no es deseable.

Las proporciones de la imagen de tamaño máximo para hacer que en cada grupo estaban todos alrededor 1.6 con un alto unos pocos bits. Para mantener las cosas más simples que decidí usar una proporción de 16:10 para todas las imágenes y se acercó con tamaños para hacer por consiguiente.

Esto significa en la mayoría de los casos la imagen no será un ajuste perfecto al tamaño de pantalla, pero todas las pantallas obtendrán algo muy cercano y no hay pantalla va a terminar con algo demasiado pequeña. También significa una imagen de origen puede ser cultivada para 16:10 once and then mul­tiple sizes eas­ily created

grupos de resolución de paisaje común

Como se puede ver he agrupado en un buen número de resoluciones y entonces hará 1 imagen que cubrirá todas las alturas hasta la altura más grande en ese grupo. Voy a hacer que la imagen también es lo suficientemente amplia como para la anchura máxima altura tal que podría ser emparejado con una pantalla normal. No he tenido en cuenta las configuraciones inusuales como 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

Porque CSS utiliza el tamaño de la ventana gráfica o en el navegador y no a las pantallas de paisaje tamaño de la pantalla es necesario utilizar el ancho en lugar de altura - como en la mayoría de los sistemas de la parte superior e inferior del espacio de perder a las barras de título, etc mientras que la anchura es por lo general maximizada. Sin embargo, para pantallas de retrato es mejor utilizar la propiedad height. Esto se puede hacer como CSS can identi­fy the screen orientation

los CSS se utiliza a continuación, busca la manera siguiente

cuerpo{background-repeat: no-repeat; background-attachment: fijo; background-position: centro; fondo de tamaño: cubrir;}

@medios de comunicación (anchura máxima: 768px) {cuerpo { imagen de fondo: url(bg480.jpg); }}
@medios de comunicación (min-width:769px) y (anchura máxima: 1024px) {cuerpo { imagen de fondo: url(bg640.jpg); }}
@medios de comunicación (min-width:1025px) y (anchura máxima: 1280px) {cuerpo { imagen de fondo: url(bg800.jpg); }}
@medios de comunicación (min-width:1281px) y (anchura máxima: 1600px) {cuerpo { imagen de fondo: url(bg1000.jpg); }}
@medios de comunicación (min-width:1601px) y (anchura máxima: 1920px) {cuerpo { imagen de fondo: url(bg1200.jpg); }}
@medios de comunicación (min-width:1921px) y (anchura máxima: 2560px) {cuerpo { imagen de fondo: url(bg1600.jpg); }}
@medios de comunicación (min-width:2561px) {cuerpo { imagen de fondo: url(../images / bg2400.jpg); }}

@medios de comunicación (orientación: retrato){
@medios de comunicación (Altura máxima: 480px) {cuerpo { imagen de fondo: url(bg480.jpg); }}
@medios de comunicación (min-altura:481px) y (Altura máxima: 640px) {cuerpo { imagen de fondo: url(bg640.jpg); }}
@medios de comunicación (min-altura:641px) y (Altura máxima: 800px) {cuerpo { imagen de fondo: url(bg800.jpg); }}
@medios de comunicación (min-altura:801px) y (Altura máxima: 1000px) {cuerpo { imagen de fondo: url(bg1000.jpg); }}
@medios de comunicación (min-altura:1001px) y (Altura máxima: 1200px) {cuerpo { imagen de fondo: url(bg1200.jpg); }}
@medios de comunicación (min-altura:1201px) y (Altura máxima: 1600px) {cuerpo { imagen de fondo: url(bg1600.jpg); }}
@medios de comunicación (min-altura:1601px) {cuerpo { imagen de fondo: url(bg2400.jpg); }}
}