{"id":5389,"date":"2024-08-27T17:49:11","date_gmt":"2024-08-27T17:49:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/image-arriere-plan-css-background-image\/"},"modified":"2024-11-13T16:31:47","modified_gmt":"2024-11-13T16:31:47","slug":"image-arriere-plan-css-background-image","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/image-arriere-plan-css-background-image\/","title":{"rendered":"7.1 Image d&rsquo;Arri\u00e8re-Plan en CSS : Utiliser background-image"},"content":{"rendered":"\n\n\n<p><strong>Comprendre et Utiliser <code>background-image<\/code> en CSS<\/strong> est essentiel pour tout d\u00e9veloppeur web souhaitant cr\u00e9er des sites esth\u00e9tiquement attrayants. Cette propri\u00e9t\u00e9 permet de d\u00e9finir une image comme arri\u00e8re-plan d&rsquo;un \u00e9l\u00e9ment HTML, offrant une multitude de possibilit\u00e9s de design. D\u00e9couvrons comment utiliser efficacement <strong>background-image<\/strong> en CSS avec des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Propri\u00e9t\u00e9 <strong>background-image<\/strong> en CSS<\/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\/586651057?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-image<\/code> permet d&rsquo;utiliser une image comme arri\u00e8re-plan pour un \u00e9l\u00e9ment HTML. Pour l&rsquo;impl\u00e9menter, nous devons sp\u00e9cifier l&rsquo;URL de l&rsquo;image \u00e0 utiliser. Voici un exemple de base :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>background-image<\/code> en CSS<\/h3>\n\n\n\n<p>Pour utiliser la propri\u00e9t\u00e9 <code>background-image<\/code>, nous devons \u00e9crire la r\u00e8gle CSS suivante en rempla\u00e7ant <i>path\/to\/image.jpg<\/i> par le chemin r\u00e9el de votre image :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('path\/to\/image.jpg');\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Param\u00e9trer la Taille et la Position de l&rsquo;Image<\/h3>\n\n\n\n<p>Pour un contr\u00f4le plus pr\u00e9cis sur l&rsquo;affichage de l&rsquo;image d&rsquo;arri\u00e8re-plan, nous pouvons utiliser d&rsquo;autres propri\u00e9t\u00e9s CSS comme <code>background-size<\/code> et <code>background-position<\/code> :<\/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; \/* ajuste l'image pour couvrir toute la zone *\/ \n    background-position: center; \/* centre l'image *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9p\u00e9ter l&rsquo;Image d&rsquo;Arri\u00e8re-Plan<\/h3>\n\n\n\n<p>Par d\u00e9faut, l&rsquo;image d&rsquo;arri\u00e8re-plan est r\u00e9p\u00e9t\u00e9e pour couvrir l&rsquo;\u00e9l\u00e9ment. Pour contr\u00f4ler ce comportement, nous pouvons utiliser la propri\u00e9t\u00e9 <code>background-repeat<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('path\/to\/image.jpg');\n    background-repeat: no-repeat; \/* emp\u00eache la r\u00e9p\u00e9tition de l'image *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter Plusieurs Images d&rsquo;Arri\u00e8re-Plan<\/h3>\n\n\n\n<p>Il est \u00e9galement possible de sp\u00e9cifier plusieurs images d&rsquo;arri\u00e8re-plan pour un m\u00eame \u00e9l\u00e9ment, en les s\u00e9parant par des virgules :<\/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-position: center, top right;\n    background-size: cover, auto;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Compatibilit\u00e9 et Performances<\/h3>\n\n\n\n<p>Lors de l&rsquo;utilisation de <code>background-image<\/code>, il est important de consid\u00e9rer la compatibilit\u00e9 entre les navigateurs et l&rsquo;impact sur les performances. Assurez-vous d&rsquo;optimiser les images pour r\u00e9duire le temps de chargement.<\/p>\n\n\n<p><!-- Ajouter du contenu additionnel --><\/p>\n\n\n<h3 class=\"wp-block-heading\">Associations avec d&rsquo;Autres Propri\u00e9t\u00e9s CSS<\/h3>\n\n\n\n<p>L&rsquo;utilisation de la propri\u00e9t\u00e9 <code>background-image<\/code> peut \u00eatre tr\u00e8s puissante lorsqu&rsquo;elle est combin\u00e9e avec d&rsquo;autres propri\u00e9t\u00e9s CSS comme <code>background-attachment<\/code> et <code>background-blend-mode<\/code>. Par exemple, nous pouvons fixer l&rsquo;image d&rsquo;arri\u00e8re-plan pour qu&rsquo;elle demeure immobile lors du d\u00e9filement :<\/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; \/* Image reste fixe lors du d\u00e9filement *\/\n}<\/code><\/pre>\n\n\n\n<p>Nous pouvons aussi m\u00e9langer l&rsquo;image avec une couleur de fond :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('path\/to\/image.jpg');\n    background-color: rgba(255, 255, 255, 0.5); \/* fond blanc semi-translucide *\/\n    background-blend-mode: multiply; \/* mode de m\u00e9lange multiplicateur *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pratiques Avanc\u00e9es pour Am\u00e9liorer l\u2019UX<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur, envisagez d&rsquo;utiliser des animations CSS avec vos images d&rsquo;arri\u00e8re-plan. Par exemple, nous pouvons animer une image d&rsquo;arri\u00e8re-plan pour cr\u00e9er un effet de parallaxe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n@keyframes moveBackground {\n    0% { background-position: 0% 50%; }\n    50% { background-position: 100% 50%; }\n    100% { background-position: 0% 50%; }\n}\n\nbody {\n    background-image: url('path\/to\/image.jpg');\n    animation: moveBackground 10s linear infinite;\n}<\/code><\/pre>\n\n\n\n<p>En explorant davantage les possibilit\u00e9s avec <code>background-image<\/code>, vous pourrez cr\u00e9er des designs innovants et captivants.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation de <strong>background-image en CSS<\/strong> est un outil puissant pour les d\u00e9veloppeurs web visant \u00e0 cr\u00e9er des interfaces attrayantes. En combinant cette propri\u00e9t\u00e9 avec d&rsquo;autres propri\u00e9t\u00e9s CSS telles que <code>background-size<\/code>, <code>background-repeat<\/code>, et <code>background-blend-mode<\/code>, il est possible de r\u00e9aliser des designs complexes et dynamiques. Continuez \u00e0 exp\u00e9rimenter avec <code>background-image<\/code> pour d\u00e9couvrir tout son potentiel, et pour plus d\u2019astuces CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet sur HTML5 et CSS3<\/a>.<\/p>\n\n\n\n<p>En compl\u00e9ment de ce guide sur <code>background-image<\/code>, n&rsquo;h\u00e9sitez pas \u00e0 explorer nos autres articles sur les \u00e9l\u00e9ments textuels (https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\/), l&rsquo;utilisation de <code>div<\/code> et <code>span<\/code> en CSS (https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\/), la syntaxe CSS (https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\/), les s\u00e9lecteurs avanc\u00e9s en CSS (https:\/\/wikiform.fr\/codespace\/selecteurs-avances-css-techniques\/), et la cr\u00e9ation de votre premi\u00e8re page HTML (https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\/).<\/p>\n\n\n\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\"><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 Formation HTML ET CSS Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Comprendre et Utiliser background-image en CSS est essentiel pour tout d\u00e9veloppeur web souhaitant cr\u00e9er des sites esth\u00e9tiquement attrayants. Cette propri\u00e9t\u00e9 permet de d\u00e9finir une image&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5389","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\/5389","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=5389"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5389\/revisions"}],"predecessor-version":[{"id":6045,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5389\/revisions\/6045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2743"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}