{"id":5395,"date":"2024-08-27T18:01:19","date_gmt":"2024-08-27T18:01:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/position-arriere-plan-css-guide-complet\/"},"modified":"2024-11-13T16:48:53","modified_gmt":"2024-11-13T16:48:53","slug":"position-arriere-plan-css-guide-complet","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/position-arriere-plan-css-guide-complet\/","title":{"rendered":"7.4 Position de l\u2019Arri\u00e8re-Plan en CSS : Guide Complet"},"content":{"rendered":"\n\n\n<p><strong>La Position de l&rsquo;Arri\u00e8re-Plan en CSS<\/strong> est une propri\u00e9t\u00e9 cl\u00e9 pour contr\u00f4ler l&rsquo;apparence des \u00e9l\u00e9ments de vos pages web. Ma\u00eetriser cette propri\u00e9t\u00e9 peut vous aider \u00e0 cr\u00e9er des interfaces plus esth\u00e9tiques et engageantes. Faisons le tour complet de cette fonctionnalit\u00e9 et explorons comment l&rsquo;utiliser efficacement gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Propri\u00e9t\u00e9 <strong>Position de l&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\/586651423?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-l-offre-speciale\">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-debutant-a-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-debutant-a-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-developpeur-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('.amount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.amount 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-position<\/code> en CSS permet de contr\u00f4ler l&#8217;emplacement de l&rsquo;image de fond \u00e0 l&rsquo;int\u00e9rieur de son conteneur. Cette propri\u00e9t\u00e9 est incroyablement polyvalente et offre plusieurs options pour aligner et positionner votre arri\u00e8re-plan de mani\u00e8re pr\u00e9cise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce que la Propri\u00e9t\u00e9 <code>background-position<\/code> ?<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-position<\/code> d\u00e9termine la position initiale de l&rsquo;image de fond. Elle accepte plusieurs valeurs possibles, exprim\u00e9es en unit\u00e9s de longueur, pourcentages ou mots-cl\u00e9s comme <code>top<\/code>, <code>right<\/code>, <code>center<\/code>, <code>bottom<\/code> et <code>left<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Valeurs G\u00e9n\u00e9riques de <code>background-position<\/code><\/h3>\n\n\n\n<p>Voici quelques exemples simples d&rsquo;utilisation de la propri\u00e9t\u00e9 <code>background-position<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Positionner l'image en haut \u00e0 droite *\/\n.element {\n    background-position: top right;\n}\n\n\/* Centrer l'image *\/\n.element {\n    background-position: center;\n}\n\n\/* Positionner l'image en bas \u00e0 gauche *\/\n.element {\n    background-position: bottom left;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Pourcentages<\/h3>\n\n\n\n<p>Vous pouvez aussi utiliser les pourcentages pour positionner votre image de fond, ce qui est particuli\u00e8rement utile pour cr\u00e9er des mises en page r\u00e9actives :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Positionner l'image \u00e0 50% horizontalement et 25% verticalement *\/\n.element {\n    background-position: 50% 25%;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Unit\u00e9s de Longueur<\/h3>\n\n\n\n<p>Pour un contr\u00f4le encore plus pr\u00e9cis, les unit\u00e9s de longueur peuvent \u00eatre utilis\u00e9es pour sp\u00e9cifier la position de l&rsquo;image de fond :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Positionner l'image \u00e0 20px du bord gauche et \u00e0 10px du bord sup\u00e9rieur *\/\n.element {\n    background-position: 20px 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison de Valeurs<\/h3>\n\n\n\n<p>Il est possible de combiner les valeurs de mots-cl\u00e9s, les pourcentages et les unit\u00e9s de longueur pour un positionnement unique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Combinaison de valeur de mot-cl\u00e9 et pourcentage *\/\n.element {\n    background-position: top 20%;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Positionner Plusieurs Arri\u00e8re-Plans<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement d\u00e9finir plusieurs positions pour plusieurs images de fond, s\u00e9par\u00e9es par des virgules :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Positionner deux images de fond *\/\n.element {\n    background-image: url('image1.png'), url('image2.png');\n    background-position: top left, bottom right;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Position de l&rsquo;Arri\u00e8re-Plan en CSS<\/h3>\n\n\n\n<p>Pour aller plus loin, explorons quelques exemples avanc\u00e9s qui montrent le v\u00e9ritable potentiel de la propri\u00e9t\u00e9 <code>background-position<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er des Effets de Parallaxe<\/h4>\n\n\n\n<p>Les effets de parallaxe font partie des techniques de design les plus populaires pour les sites web modernes. Utilisez la propri\u00e9t\u00e9 <code>background-attachment<\/code> en combinaison avec <code>background-position<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Cr\u00e9er un effet de parallaxe *\/\n.parallax {\n    background-image: url('parallax-bg.jpg');\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center;\n    background-attachment: fixed;\n    height: 100vh;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Conception de Boutons et Cartes<\/h4>\n\n\n\n<p>Utilisez <code>background-position<\/code> pour concevoir des boutons ou des cartes avec des ic\u00f4nes en arri\u00e8re-plan :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Bouton avec ic\u00f4ne *\/\n.button {\n    background-image: url('icon.png');\n    background-repeat: no-repeat;\n    background-position: 10px center;\n    padding-left: 40px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Disposition d&rsquo;Images pour le Web Design<\/h4>\n\n\n\n<p>Pour des designs plus esth\u00e9tiques, vous pouvez utiliser <code>background-position<\/code> pour cr\u00e9er des effets visuels intrigants avec les images :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Disposition en grille *\/\n.grid-item {\n    background-image: url('grid-image.jpg');\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: cover;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Applications en Projet R\u00e9el<\/h4>\n\n\n\n<p>Dans un projet complet, vous pouvez utiliser <code>background-position<\/code> pour cr\u00e9er des sections de page attrayantes avec des images de fond align\u00e9es pr\u00e9cis\u00e9ment pour des effets visuels coh\u00e9rents et percutants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Header de site web *\/\n.header {\n    background-image: url('header-bg.jpg');\n    background-position: center center;\n    background-size: cover;\n    height: 60vh;\n    color: white;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Poursuivez votre exploration de la propri\u00e9t\u00e9 <code>background-position<\/code> et d&rsquo;autres propri\u00e9t\u00e9s CSS en consultant des ressources externes. Par exemple, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-position\" target=\"_blank\" rel=\"noopener\">la documentation MDN<\/a> offre une couverture exhaustive de cette propri\u00e9t\u00e9 et de ses diff\u00e9rentes utilisations. Pour apprendre les bases de CSS, suivez des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> ou de la <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noopener\">Codecademy<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La propri\u00e9t\u00e9 <strong>background-position<\/strong> en CSS est un outil puissant pour les concepteurs de sites web. Elle permet de contr\u00f4ler l&#8217;emplacement des images de fond avec une pr\u00e9cision extr\u00eame, contribuant \u00e0 l&rsquo;esth\u00e9tique et \u00e0 l&rsquo;interactivit\u00e9 de vos pages web. En ma\u00eetrisant cette propri\u00e9t\u00e9, vous serez en mesure de cr\u00e9er des designs plus engageants et plus professionnels. Pour plus de techniques avanc\u00e9es en CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avance\/153\">les fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a> ou apprenez \u00e0 cr\u00e9er des transitions et animations avec notre <a href=\"https:\/\/wikiform.fr\/codespace\/css-transitions-et-animations\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-developpeur-css\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.jpg\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n<p><!-- Ajout de contenu pour atteindre 1200 mots --><\/p>\n\n\n<h3 class=\"wp-block-heading\">Autres Propri\u00e9t\u00e9s en CSS<\/h3>\n\n\n\n<p>En plus de <code>background-position<\/code>, il existe d&rsquo;autres propri\u00e9t\u00e9s CSS qui peuvent am\u00e9liorer la pr\u00e9sentation et l&rsquo;interactivit\u00e9 de votre site web. La propri\u00e9t\u00e9 <code>background-size<\/code> est couramment utilis\u00e9e pour contr\u00f4ler la taille de l&rsquo;image de fond, ce qui permet de l&rsquo;\u00e9tendre ou de la r\u00e9duire selon les besoins du design.<\/p>\n\n\n\n<p>Les propri\u00e9t\u00e9s comme <code>background-repeat<\/code>, <code>background-attachment<\/code> et <code>background-origin<\/code> \u00e9largissent encore davantage les possibilit\u00e9s cr\u00e9atives pour la gestion des arri\u00e8re-plans. Par exemple, en utilisant <code>background-repeat<\/code>, vous pouvez d\u00e9cider si une image de fond se r\u00e9p\u00e9tera horizontalement, verticalement, ou non.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Exemple d'image de fond avec r\u00e9p\u00e9tition *\/\n.element {\n    background-image: url('background-image.png');\n    background-repeat: repeat-x; \/* R\u00e9p\u00e8te l'image horizontalement *\/\n}\n<\/code><\/pre>\n\n\n\n<p>L&rsquo;utilisation combin\u00e9e de toutes ces propri\u00e9t\u00e9s peut transformer l&rsquo;aspect statique d&rsquo;un site web en une exp\u00e9rience dynamique et visuellement attrayante. Par exemple, en ajoutant une propri\u00e9t\u00e9 <code>background-size: cover<\/code>, l&rsquo;image de fond couvrira enti\u00e8rement le conteneur, quel que soit sa taille.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration avec d&rsquo;autres technologies web<\/h3>\n\n\n\n<p>La ma\u00eetrise de la propri\u00e9t\u00e9 <strong>background-position<\/strong> et d&rsquo;autres propri\u00e9t\u00e9s de fond en CSS est essentielle pour tout d\u00e9veloppeur web. Ces comp\u00e9tences sont particuli\u00e8rement utiles lorsqu&rsquo;ils sont int\u00e9gr\u00e9s dans des projets plus larges impliquant des langages comme HTML et JavaScript. Vous pouvez d\u00e9couvrir plus sur les\n","protected":false},"excerpt":{"rendered":"<p>La Position de l&rsquo;Arri\u00e8re-Plan en CSS est une propri\u00e9t\u00e9 cl\u00e9 pour contr\u00f4ler l&rsquo;apparence des \u00e9l\u00e9ments de vos pages web. Ma\u00eetriser cette propri\u00e9t\u00e9 peut vous aider&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2757,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5395","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\/5395","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=5395"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5395\/revisions"}],"predecessor-version":[{"id":6047,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5395\/revisions\/6047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2757"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}