{"id":5401,"date":"2024-08-27T18:12:59","date_gmt":"2024-08-27T18:12:59","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fixer-arriere-plan-css-background-attachment\/"},"modified":"2024-11-15T15:23:53","modified_gmt":"2024-11-15T15:23:53","slug":"fixer-arriere-plan-css-background-attachment","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fixer-arriere-plan-css-background-attachment\/","title":{"rendered":"7.7 Fixer la Position de l\u2019Arri\u00e8re-Plan en CSS"},"content":{"rendered":"\n\n\n<p><strong>Fixer la Position de l\u2019Arri\u00e8re-Plan en CSS<\/strong> est un aspect important du design de page web, permettant de cr\u00e9er des arri\u00e8re-plans visuellement agr\u00e9ables et ergonomiques. Gr\u00e2ce aux propri\u00e9t\u00e9s CSS, vous pouvez contr\u00f4ler la mani\u00e8re dont l\u2019arri\u00e8re-plan est affich\u00e9 et fix\u00e9. Dans ce tutoriel, nous allons explorer comment fixer la position de l&rsquo;arri\u00e8re-plan en CSS, en fournissant des exemples concrets pour une meilleure compr\u00e9hension.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Fixation de l\u2019Arri\u00e8re-Plan 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\/586651573?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>Fixer la position de l&rsquo;arri\u00e8re-plan en CSS signifie s&rsquo;assurer que l&rsquo;arri\u00e8re-plan reste fixe lors du d\u00e9filement. Cela am\u00e9liore visuellement la conception de la page en cr\u00e9ant un effet de parallaxe. Voyons comment utiliser CSS pour fixer l&rsquo;arri\u00e8re-plan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fixer la Position de l\u2019Arri\u00e8re-Plan avec <code>background-attachment<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-attachment<\/code> en CSS permet de contr\u00f4ler le comportement de l\u2019arri\u00e8re-plan lorsque l\u2019utilisateur fait d\u00e9filer la page. Elle accepte principalement trois valeurs : <code>scroll<\/code>, <code>fixed<\/code>, et <code>local<\/code>. Pour en savoir plus sur la syntaxe CSS, n\u2019h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">Guide des bases de la syntaxe CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('background.jpg');\n    background-attachment: fixed;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, l&rsquo;arri\u00e8re-plan restera fixe pendant que le contenu de la page d\u00e9file. Vous pouvez \u00e9galement apprendre comment fixer d&rsquo;autres \u00e9l\u00e9ments tels que les divs en lisant notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\">Guide complet sur les divs et spans en CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Positionnement de l&rsquo;Arri\u00e8re-Plan avec <code>background-position<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-position<\/code> permet de d\u00e9finir la position initiale de l&rsquo;image de fond. Elle accepte des valeurs cl\u00e9s telles que <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code>, <code>center<\/code>, ou des valeurs en pourcentage (par exemple, <code>50%<\/code>). Pour une meilleure ma\u00eetrise de cette propri\u00e9t\u00e9, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/position-arriere-plan-css-guide-complet\">Guide complet sur le positionnement de l&rsquo;arri\u00e8re-plan en CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('background.jpg');\n    background-attachment: fixed;\n    background-position: center top; \/* Centre l\u2019image en haut *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>background-size<\/code> pour Adapter l&rsquo;Image de Fond<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-size<\/code> permet de redimensionner l&rsquo;image de l&rsquo;arri\u00e8re-plan pour s&rsquo;adapter \u00e0 la taille du conteneur. Elle accepte des valeurs telles que <code>cover<\/code>, <code>contain<\/code>, ou des tailles sp\u00e9cifiques en pixels ou pourcentage. Pour une autre m\u00e9thode de mise \u00e0 l&rsquo;\u00e9chelle des images, consultez notre article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/taille-images-arriere-plan-css-guide\">taille des images d&rsquo;arri\u00e8re-plan en CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('background.jpg');\n    background-attachment: fixed;\n    background-position: center;\n    background-size: cover; \/* Ajuste l'image pour couvrir enti\u00e8rement le conteneur *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaisons Avanc\u00e9es de Propri\u00e9t\u00e9s de l&rsquo;Arri\u00e8re-Plan<\/h3>\n\n\n\n<p>Pour des conceptions plus avanc\u00e9es, vous pouvez combiner plusieurs propri\u00e9t\u00e9s de l&rsquo;arri\u00e8re-plan pour obtenir l&rsquo;effet souhait\u00e9. Voici un exemple qui combine plusieurs propri\u00e9t\u00e9s pour fixer et positionner un arri\u00e8re-plan :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('background.jpg');\n    background-attachment: fixed; \/* Fixe l'image de fond *\/\n    background-position: bottom right; \/* Positionne l'image en bas \u00e0 droite *\/\n    background-size: 50% 50%; \/* Ajuste la taille de l'image pour couvrir 50% de la largeur et de la hauteur *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet de Page avec Arri\u00e8re-Plan Fix\u00e9<\/h3>\n\n\n\n<p>Voyons maintenant un exemple complet d&rsquo;une page web avec des sections et un arri\u00e8re-plan fixe. Cela d\u00e9montrera comment int\u00e9grer toutes les propri\u00e9t\u00e9s que nous avons vues auparavant. Vous pourriez \u00e9galement \u00eatre int\u00e9ress\u00e9 par notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\">Cr\u00e9ation de layout simple avec Media Queries<\/a> pour des conceptions responsives.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Page avec Arri\u00e8re-Plan Fix\u00e9&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            margin: 0;\n            font-family: Arial, sans-serif;\n            background-image: url('background.jpg');\n            background-attachment: fixed;\n            background-position: center;\n            background-size: cover;\n            color: #fff;\n        }\n        .section {\n            padding: 100px;\n            text-align: center;\n        }\n        .section:nth-child(even) {\n            background-color: rgba(0, 0, 0, 0.5);\n        }\n        .section:nth-child(odd) {\n            background-color: rgba(255, 255, 255, 0.7);\n            color: #000;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"section\"&gt;\n        &lt;h1&gt;Section 1&lt;\/h1&gt;\n        &lt;p&gt;Contenu de la premi\u00e8re section.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"section\"&gt;\n        &lt;h1&gt;Section 2&lt;\/h1&gt;\n        &lt;p&gt;Contenu de la deuxi\u00e8me section.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"section\"&gt;\n        &lt;h1&gt;Section 3&lt;\/h1&gt;\n        &lt;p&gt;Contenu de la troisi\u00e8me section.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Cet exemple d\u00e9montre comment cr\u00e9er plusieurs sections avec des arri\u00e8re-plans alternants tout en gardant une image de fond fixe pour la page enti\u00e8re. Pour des guides suppl\u00e9mentaires sur la <a href=\"https:\/\/wikiform.fr\/codespace\/fixer-arriere-plan-css-background-attachment\">fixation de l&rsquo;arri\u00e8re-plan avec background-attachment<\/a>, visitez notre site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Fixer la position de l\u2019arri\u00e8re-plan en CSS est une technique essentielle pour cr\u00e9er des exp\u00e9riences utilisateur attractives. En utilisant les propri\u00e9t\u00e9s CSS comme <code>background-attachment<\/code>, <code>background-position<\/code>, et <code>background-size<\/code>, vous pouvez contr\u00f4ler pr\u00e9cis\u00e9ment comment l\u2019image de fond est affich\u00e9e et rendue. Continuez \u00e0 exp\u00e9rimenter ces propri\u00e9t\u00e9s pour ma\u00eetriser l\u2019art du design web avec CSS. Pour des tutoriels plus avanc\u00e9s, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/150\">le CSS avanc\u00e9<\/a> ou suivez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr\u00e9er-une-interface-r\u00e9active-avec-css\/150\">cours sp\u00e9cialis\u00e9 sur les interfaces r\u00e9actives<\/a>.<\/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\n<p>Pour devenir un expert en HTML et CSS, rendez-vous sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">la formation Learnify<\/a> et profitez de notre offre sp\u00e9ciale pour apprendre rapidement et efficacement.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Fixer la Position de l\u2019Arri\u00e8re-Plan en CSS est un aspect important du design de page web, permettant de cr\u00e9er des arri\u00e8re-plans visuellement agr\u00e9ables et ergonomiques&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":2738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5401","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\/5401","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=5401"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5401\/revisions"}],"predecessor-version":[{"id":6049,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5401\/revisions\/6049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2738"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}