{"id":284,"date":"2020-11-23T07:30:15","date_gmt":"2020-11-23T06:30:15","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=284"},"modified":"2020-11-22T22:53:49","modified_gmt":"2020-11-22T21:53:49","slug":"background-image-et-ses-potes-2","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/11\/23\/background-image-et-ses-potes-2\/","title":{"rendered":"Background-image et ses potes"},"content":{"rendered":"

<\/p>\n\n\n

En mode projet, \u00e9pisode 2<\/em><\/h2>\n\n\n\n

La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour votre projet. Le billet est publi\u00e9 en parall\u00e8le des fichiers HTML et CSS sur la dropbox.<\/em><\/p>\n\n\n\n

Un fond en image<\/h2>\n\n\n\n

Plusieurs d’entre vous ont manifest\u00e9 l’envie d’avoir une image de fond \u00e0 dans leur design de site ; la plupart une image de fond dans le body<\/strong>, mais certains une image de fond dans le header<\/strong>, ou ailleurs\u2026<\/p>\n\n\n\n

A priori, pas trop dur \u00e0 faire : on utilise la propri\u00e9t\u00e9 background-image<\/strong> en CSS et le tour est jou\u00e9<\/p>\n\n\n\n

body {\n background-image:url(\"mon-image-de-fond.jpg\");\n}\n\/* ou bien, pour le header *\/\nheader {\n background-image:url (\"mon-image-d-en-tete.jpg);\n}\n\/* bien entendu, les fichiers images utilis\u00e9s ici sont \u00e0 la racine de votre site et pas dans un dossier images, et ils portent le nom correspondant \u00e0 leur URL\u2026 *\/<\/pre>\n\n\n\n
Une image trop petite<\/h2>\n\n\n\n
Mais il arrive que l’image ne remplisse pas tout le fond.<\/p>\n\n\n\n
\"\"
un petit motif de rayure<\/figcaption><\/figure><\/div>\n\n\n\n
\u00c7a peut \u00eatre voulu, si votre image est un motif destin\u00e9 \u00e0 se dupliquer : c’est la r\u00e8gle par d\u00e9faut de la propri\u00e9t\u00e9 background-repeat<\/strong> : `background-repeat:repeat`, ce qui veut dire que l’image va se dupliquer sur la longueur et sur la hauteur de son contenant. On utilise cette propri\u00e9t\u00e9 par d\u00e9faut pour mettre un \u00ab\u00a0papier peint\u00a0\u00bb en fond de page) : par exemple, si vous mettez en fond de body<\/strong> l’image carr\u00e9e de 74px de c\u00f4t\u00e9 ci-contre, elle va se d\u00e9multiplier en longueur et en hauteur pour tout remplir.<\/p>\n\n\n\n
\"\"
le m\u00eame motif \u00ab\u00a0rayure\u00a0\u00bb en image de fond du body<\/figcaption><\/figure>\n\n\n\n
\"une<\/figure>
\n
Mais que se passe-t-il si vous vouliez mettre une superbe image de fond  et que vous vouliez que cette image remplisse toute la fen\u00eatre de  navigateur quelque soit sa taille ? Si votre image est trop petite, et  si elle ne peut pas \u00eatre r\u00e9p\u00e9t\u00e9e, votre design risque d\u2019\u00eatre too moche<\/em>.<\/p>\n<\/div><\/div>\n\n\n\n
Une image qui remplisse tout<\/h2>\n\n\n\n
1. Bien choisir son image<\/h3>\n\n\n\n
La premi\u00e8re solution, c’est de choisir une image assez grande pour qu’elle remplisse la fen\u00eatre du navigateur en toute circonstance (par exemple, une image cr\u00e9\u00e9e pour \u00eatre un fond d’\u00e9cran). En anglais, on appelle ces fonds d’\u00e9cran Wallpaper<\/em>, et si vous faites une recherche wallpaper creative commons<\/em> sur un moteur quelconque, il y a des chances que vous tombiez sur de superbes images comme celle-ci\u2026 et elles seront libres de droit \ud83d\ude09<\/p>\n\n\n\n
\"Street
Street Lights & Twilight Sky in background License: Creative Commons Attribution 2.0 Generic Photographer: N. Feans (Flickr Portfolio)<\/figcaption><\/figure><\/div>\n\n\n\n
L’inconv\u00e9nient des images de grande taille, c’est qu’elles p\u00e8sent lourd, et quand votre site est t\u00e9l\u00e9charg\u00e9 depuis une mauvaise connexion, ou tout simplement depuis un t\u00e9l\u00e9phone (la plupart du temps en 3G), le fait que votre image mette du temps \u00e0 charger peut conduire votre lecteur \u00e0\u2026 passer \u00e0 autre chose.<\/p>\n\n\n\n
Aussi, m\u00eame si vous choisissez une grande image, r\u00e9duisez sa r\u00e9solution pour qu’elle p\u00e8se le moins lourd possible (moins de 200ko, c’est bien); passez-l\u00e0 \u00e0 la moulinette de jpegmini<\/a> par exemple.<\/p>\n\n\n\n
2. Rendre son image flexible<\/h3>\n\n\n\n
La 2e solution, c’est de permettre \u00e0 l’image de s’\u00e9tirer en fonction de la fen\u00eatre. On sait le faire pour une image int\u00e9gr\u00e9e en HTML: on utilise le truc<\/em> d’Ethan Marcotte pour que toutes les images prennent la taille de leur contenant:<\/p>\n\n\n\n
img {max-width:100%; height: auto}<\/code><\/pre>\n\n\n\n
Oui, mais quand l\u2019image est ins\u00e9r\u00e9e en CSS ?<\/strong> C\u2019est l\u00e0 qu\u2019intervient la propri\u00e9t\u00e9 background-size<\/strong>.<\/p>\n\n\n\n
Background-size<\/code>, le sauveur<\/h3>\n\n\n\n
Le CSS, c’est comme les apps sur iPhone: y a une propri\u00e9t\u00e9 pour tout!<\/p>\n\n\n\n
Celle qui nous int\u00e9resse c’est la propri\u00e9t\u00e9 background-size<\/strong>.<\/p>\n\n\n\n
Pour aller vite, si vous voulez que votre image remplisse correctement le fond de votre body, utilisez<\/p>\n\n\n\n
    body {\n     background-image:url(\"monimagedefond.jpg\");\n    background-size:cover;\n     }<\/code><\/pre>\n\n\n\n
Votre image remplit maintenant le fond et s’\u00e9tire \u00e0 volont\u00e9.<\/p>\n\n\n\n
\"\"
A\u00efe, l’image de fond n’est pas assez haute\u2026<\/figcaption><\/figure><\/div>\n\n\n\n
Enfin, presque<\/em>: votre image va s’\u00e9tirer en respectant ses propres proportions<\/strong>: c’est-\u00e0-dire correctement en largeur (si vous avez choisi, comme c’est majoritairement le cas, une image au format paysage), mais pas en hauteur (il faudrait qu’elle d\u00e9borde en largeur, mais on le lui a interdit en utilisant background-size:cover<\/code>).<\/p>\n\n\n\n
Alors, quoi\u2026 le probl\u00e8me est-il insoluble?<\/p>\n\n\n\n
Mais non, je vous l’ai dit : il y a (aussi) une propri\u00e9t\u00e9 pour \u00e7a<\/strong> !<\/p>\n\n\n\n
Fix\u00e9 et attach\u00e9, et le tour est jou\u00e9<\/h3>\n\n\n\n
Si on ajoute la valeur fixed<\/strong> \u00e0 la propri\u00e9t\u00e9 background-attachment<\/strong>, l’image va remplir tout son parent et ne va plus \u00eatre mobile, quelles que soient les proportions prises par le parent.<\/p>\n\n\n\n
Il faut donc ajouter la petite ligne \u00e0 notre r\u00e8gle CSS pour le body:<\/p>\n\n\n\n
body {
 background-image:url(images\/monimagedefond.jpg); \/* ici, mon image de fond est dans un dossier images *\/
 background-repeat:no-repeat; \/* \u00e9vite que notre image se r\u00e9p\u00e8te si elle est trop petite *\/\n background-size:cover; \/* l'image remplit son parent quel que soit ses proportions *\/\n background-attachment:fixed; \/* l'image est attach\u00e9e \u00e0 son parent *\/\n}<\/pre>\n\n\n\n
Et voil\u00e0, maintenant, j\u2019ai un fond en plein \u00e9cran et responsive<\/em> : elle est pas belle la vie, en long et en large ?<\/strong><\/p>\n\n\n\n
\"\"
Yeesss !<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Yesss ! M\u00eame en long !<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Yesss ! M\u00eame en large !!<\/figcaption><\/figure><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
En mode projet, \u00e9pisode 2 La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour...<\/p>\n","protected":false},"author":2,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,16,48],"tags":[],"class_list":["post-284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-faire","category-mode-demploi","category-pratique-du-web"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/12\/imageremplitlefond.jpg?fit=300%2C232&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":3,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/284\/revisions\/350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}