0images de fond sensibles pour les sites Web

J'ai récemment été mise à jour mon site Web et le serveur Web et l'ajout d'un nouveau site (LoveCrete.org). Je voulais avoir une image de fond sur LoveCrete et réalisé que bien sûr 1 ne convient pas à tous les écrans. Voici un résumé de ma réflexion et de ce que j'ai fait pour répondre aux nombreuses tailles et orientations d'écran..

Quelle orientation

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on PC and tab­lets (in hori­zont­al ori­ent­a­tion). I decided to focus on this because most images are avail­able in land­scape so this is a sens­ible place to start.

I decided that I would place images cent­rally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in por­trait ori­ent­a­tion it will load the image based on height (pas de largeur) et va perdre beaucoup à la fois bord de l'image. Doing it any oth­er way would mean need­ing images cropped to a totally dif­fer­ent shape or hav­ing a land­scape image “tile” on a tall screen, qui est pas souhaitable.

The ratios of the max­im­um size image to make in each group were all around 1.6 with a few a bit high­er. To keep things sim­pler I decided to use a ratio of 16:10 pour toutes les images et est venu avec des tailles pour faire en conséquence.

This means in most cases the image will not be a per­fect fit to the screen size, but all screens will get some­thing very close and no screen will end up with some­thing too small. Cela signifie aussi une image source peut être recadrée 16:10 once and then mul­tiple sizes eas­ily created

groupes de résolution de paysage commun

As you can see I have grouped quite a few res­ol­u­tions and will then make 1 image that will cov­er all heights up to the largest height in that group. I will make sure the image is also wide enough for the max­im­um width such a height might be paired with on a nor­mal screen. I haven’t taken account of unusu­al con­fig­ur­a­tions like 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

Car CSS uses the view­port or browser size and not the screen size land­scape screens need to use width rather than height — as on most sys­tems the top and bot­tom lose space to title bars etc whilst the width is usu­ally max­im­ised. Cependant, for por­trait dis­plays it is bet­ter to use the height prop­erty. Cela peut se faire en CSS can identi­fy the screen orientation

le CSS utilisé semble alors comme suit

corps{Répétition du fond: no-repeat; background-attachment: fixé; Position d'arrière-plan: centre; background-size: couverture;}

@médias (largeur maximale: 768px) {corps { image de fond: URL(bg480.jpg); }}
@médias (min-width:769px) et (largeur maximale: 1024px) {corps { image de fond: URL(bg640.jpg); }}
@médias (min-width:1025px) et (largeur maximale: 1280px) {corps { image de fond: URL(bg800.jpg); }}
@médias (min-width:1281px) et (largeur maximale: 1600px) {corps { image de fond: URL(bg1000.jpg); }}
@médias (min-width:1601px) et (largeur maximale: 1920px) {corps { image de fond: URL(bg1200.jpg); }}
@médias (min-width:1921px) et (largeur maximale: 2560px) {corps { image de fond: URL(bg1600.jpg); }}
@médias (min-width:2561px) {corps { image de fond: URL(../images / bg2400.jpg); }}

@médias (orientation: portrait){
@médias (hauteur maximum: 480px) {corps { image de fond: URL(bg480.jpg); }}
@médias (min-height:481px) et (hauteur maximum: 640px) {corps { image de fond: URL(bg640.jpg); }}
@médias (min-height:641px) et (hauteur maximum: 800px) {corps { image de fond: URL(bg800.jpg); }}
@médias (min-height:801px) et (hauteur maximum: 1000px) {corps { image de fond: URL(bg1000.jpg); }}
@médias (min-height:1001px) et (hauteur maximum: 1200px) {corps { image de fond: URL(bg1200.jpg); }}
@médias (min-height:1201px) et (hauteur maximum: 1600px) {corps { image de fond: URL(bg1600.jpg); }}
@médias (min-height:1601px) {corps { image de fond: URL(bg2400.jpg); }}
}