{"id":5397,"date":"2024-08-27T18:05:06","date_gmt":"2024-08-27T18:05:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/taille-images-arriere-plan-css-guide\/"},"modified":"2024-11-15T15:18:21","modified_gmt":"2024-11-15T15:18:21","slug":"taille-images-arriere-plan-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/taille-images-arriere-plan-css-guide\/","title":{"rendered":"7.5 Taille des Images d&rsquo;Arri\u00e8re-Plan en CSS : Guide"},"content":{"rendered":"\n\n\n<p><strong>7.5 Taille des Images d&rsquo;Arri\u00e8re-Plan en CSS<\/strong> : Le bon dimensionnement des images d&rsquo;arri\u00e8re-plan est crucial pour garantir une interface utilisateur esth\u00e9tiquement plaisante et fonctionnelle. Comprendre les propri\u00e9t\u00e9s de dimensionnement des images d&rsquo;arri\u00e8re-plan en CSS peut grandement am\u00e9liorer l&rsquo;apparence et la convivialit\u00e9 de vos pages web. Apprenons comment dimensionner efficacement les images d&rsquo;arri\u00e8re-plan en CSS \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Taille des Images d&rsquo;Arri\u00e8re-Plan en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586651477?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-size<\/code> en CSS vous permet de contr\u00f4ler la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan. Il existe plusieurs valeurs que vous pouvez utiliser, telles que <code>auto<\/code>, <code>cover<\/code>, et <code>contain<\/code>, chacune ayant des effets diff\u00e9rents sur le comportement de l&rsquo;arri\u00e8re-plan. Voyons ces options en d\u00e9tail avec des exemples illustratifs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la valeur <code>auto<\/code><\/h3>\n\n\n\n<p>La valeur par d\u00e9faut de la propri\u00e9t\u00e9 <code>background-size<\/code> est <code>auto<\/code>. Elle conserve les dimensions originales de l&rsquo;image d&rsquo;arri\u00e8re-plan. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: auto;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec cette propri\u00e9t\u00e9, l&rsquo;image d&rsquo;arri\u00e8re-plan est affich\u00e9e \u00e0 sa taille originale. Cependant, cela peut ne pas toujours \u00eatre id\u00e9al, surtout si l&rsquo;image est tr\u00e8s grande ou tr\u00e8s petite par rapport \u00e0 la zone de l&rsquo;\u00e9l\u00e9ment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la valeur <code>cover<\/code><\/h3>\n\n\n\n<p>La valeur <code>cover<\/code> agrandit ou r\u00e9duit l&rsquo;image d&rsquo;arri\u00e8re-plan de mani\u00e8re \u00e0 couvrir enti\u00e8rement l&rsquo;espace de l&rsquo;\u00e9l\u00e9ment, tout en maintenant ses proportions d&rsquo;origine. Cela garantit que l&rsquo;image remplit tout l&rsquo;arri\u00e8re-plan, m\u00eame si une partie de l&rsquo;image peut \u00eatre coup\u00e9e. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: cover;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette option est id\u00e9ale lorsque vous souhaitez que l&rsquo;image remplisse toute la zone de l&rsquo;\u00e9l\u00e9ment sans se soucier des dimensions exactes de l&rsquo;image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la valeur <code>contain<\/code><\/h3>\n\n\n\n<p>La valeur <code>contain<\/code> redimensionne l&rsquo;image pour qu&rsquo;elle soit enti\u00e8rement contenue dans l&rsquo;\u00e9l\u00e9ment, sans \u00eatre coup\u00e9e. Cependant, cela peut laisser des espaces vides soit horizontalement, soit verticalement selon les proportions de l&rsquo;image et de l&rsquo;\u00e9l\u00e9ment. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: contain;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette m\u00e9thode est parfaitement adapt\u00e9e lorsque vous souhaitez afficher l&rsquo;int\u00e9gralit\u00e9 de l&rsquo;image dans l&rsquo;\u00e9l\u00e9ment, mais elle peut ne pas remplir compl\u00e8tement l&rsquo;arri\u00e8re-plan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Tailles Personnalis\u00e9es<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement d\u00e9finir des tailles personnalis\u00e9es en utilisant des valeurs sp\u00e9cifiques comme des pixels, des pourcentages, ou des unit\u00e9s de taille disponible. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: 100px 200px;\n}\n<\/code><\/pre>\n\n\n\n<p>Ou bien avec des pourcentages :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: 50% 50%;\n}\n<\/code><\/pre>\n\n\n\n<p>Ces personnalisations offrent une plus grande flexibilit\u00e9 pour ajuster l&rsquo;affichage des images selon les besoins sp\u00e9cifiques de votre projet. Pour des liens connexes sur l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/taille-images-arriere-plan-css-guide\" target=\"_blank\" rel=\"noopener\">taille images arri\u00e8re-plan css<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner la Propri\u00e9t\u00e9 <code>background-size<\/code> avec d&rsquo;Autres Propri\u00e9t\u00e9s CSS<\/h3>\n\n\n\n<p>Pour des r\u00e9sultats visuellement attrayants, il est souvent utile de combiner <code>background-size<\/code> avec d&rsquo;autres propri\u00e9t\u00e9s CSS comme <code>background-position<\/code>. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: cover;\n  background-position: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette combinaison assure que l&rsquo;image couvre l&rsquo;int\u00e9gralit\u00e9 de l&rsquo;\u00e9l\u00e9ment et est centr\u00e9e pour un effet visuel optimal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Responsivit\u00e9 et Images d&rsquo;Arri\u00e8re-Plan<\/h3>\n\n\n\n<p>Lorsque vous travaillez sur des sites responsives, il est important de consid\u00e9rer comment les images d&rsquo;arri\u00e8re-plan changeront de taille en fonction des diff\u00e9rentes tailles d&rsquo;\u00e9cran. Utiliser des unit\u00e9s relatives comme <code>vw<\/code> et <code>vh<\/code> peut aider :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-size: 100vw 100vh;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette m\u00e9thode garantit que l&rsquo;image d&rsquo;arri\u00e8re-plan occupera toute la hauteur et la largeur de la fen\u00eatre, ind\u00e9pendamment de la taille de l&rsquo;appareil.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation des Arri\u00e8re-Plans en CSS<\/h3>\n\n\n\n<p>Pour approfondir votre ma\u00eetrise, voici quelques exemples avanc\u00e9s montrant comment tirer parti des propri\u00e9t\u00e9s d&rsquo;arri\u00e8re-plan en CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Images d&rsquo;Arri\u00e8re-Plan Multi-Couches<\/h4>\n\n\n\n<p>Vous pouvez utiliser plusieurs images d&rsquo;arri\u00e8re-plan pour cr\u00e9er des effets complexes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image1.jpg'), url('path\/to\/image2.png');\n  background-size: cover, contain;\n  background-position: center, bottom right;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Effets de D\u00e9filement Parallax<\/h4>\n\n\n\n<p>Les effets de d\u00e9filement parallax peuvent \u00eatre cr\u00e9\u00e9s en combinant des propri\u00e9t\u00e9s d&rsquo;arri\u00e8re-plan avec JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background-image: url('path\/to\/image.jpg');\n  background-attachment: fixed;\n  background-size: cover;\n}\n<\/code><\/pre>\n\n\n\n<p>Le d\u00e9filement \u00ab\u00a0fixed\u00a0\u00bb garde l&rsquo;image d&rsquo;arri\u00e8re-plan fixe tandis que le contenu de la page d\u00e9file par-dessus, cr\u00e9ant un effet de profondeur dynamique.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans des Projets R\u00e9els<\/h4>\n\n\n\n<p>Dans un projet r\u00e9el, combiner ces techniques permet de cr\u00e9er des interfaces visuellement agr\u00e9ables. Par exemple, dans un site e-commerce, vous pourriez utiliser des arri\u00e8re-plans pour mettre en valeur des produits sp\u00e9cifiques sans distraire l&rsquo;utilisateur. Pour cr\u00e9er une disposition similaire avec flexbox, voyez notre guide sur le <a href=\"https:\/\/wikiform.fr\/codespace\/mod\u00e8le-bo\u00eete-flexible-flexbox-css\" target=\"_blank\" rel=\"noopener\">mod\u00e8le boite flexible flexbox css<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.product-hero {\n  background-image: url('path\/to\/product-image.jpg');\n  background-size: cover;\n  background-position: center;\n  height: 500px;\n}\n<\/code><\/pre>\n\n\n\n<p>Exploitez ces techniques pour am\u00e9liorer l&rsquo;apparence et les performances de vos projets web. Pour des ressources suppl\u00e9mentaires, consultez le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-size\" target=\"_blank\" rel=\"noopener\">guide MDN sur background-size<\/a> et explorez des cours en ligne sur <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour des apprentissages plus approfondis. D&rsquo;autres guides CSS sur des propri\u00e9t\u00e9s comme <a href=\"https:\/\/wikiform.fr\/codespace\/gradient-lineaire-css-linear-gradient\" target=\"_blank\" rel=\"noopener\">gradient lin\u00e9aire css linear gradient<\/a> peuvent aussi \u00eatre utiles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La compr\u00e9hension et l&rsquo;application de la propri\u00e9t\u00e9 <strong>background-size<\/strong> en CSS sont essentielles pour des mises en page modernes et responsives. En jouant avec les diff\u00e9rentes valeurs et techniques que nous avons explor\u00e9es, vous pouvez cr\u00e9er des designs engageants et fonctionnels pour vos utilisateurs. Continuez \u00e0 exp\u00e9rimenter avec <code>background-size<\/code> et autres propri\u00e9t\u00e9s CSS pour perfectionner vos comp\u00e9tences en web design. Pour plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/152\" target=\"_blank\" rel=\"noopener\">les techniques avanc\u00e9es en CSS<\/a>.<\/p>\n\n\n\n<div style=\"margin: 20px 0;\">\n  <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">\n    <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify HTML et CSS\" title=\"\">\n  <\/a>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>7.5 Taille des Images d&rsquo;Arri\u00e8re-Plan en CSS : Le bon dimensionnement des images d&rsquo;arri\u00e8re-plan est crucial pour garantir une interface utilisateur esth\u00e9tiquement plaisante et fonctionnelle&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":2779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5397"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5397\/revisions"}],"predecessor-version":[{"id":6048,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5397\/revisions\/6048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2779"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}