{"id":5393,"date":"2024-08-27T17:56:39","date_gmt":"2024-08-27T17:56:39","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/origine-arriere-plan-css-background-origin\/"},"modified":"2024-08-27T17:56:43","modified_gmt":"2024-08-27T17:56:43","slug":"origine-arriere-plan-css-background-origin","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/origine-arriere-plan-css-background-origin\/","title":{"rendered":"7.3 Origine de l\u2019Arri\u00e8re-Plan en CSS : background-origin"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Origine de l\u2019Arri\u00e8re-Plan en CSS : background-origin<\/strong> est une propri\u00e9t\u00e9 utile permettant de contr\u00f4ler d&rsquo;o\u00f9 commence l&rsquo;arri\u00e8re-plan de votre \u00e9l\u00e9ment. Comprendre comment utiliser cette propri\u00e9t\u00e9 peut vous aider \u00e0 styliser vos pages web avec pr\u00e9cision. D\u00e9couvrons comment la mettre en \u0153uvre gr\u00e2ce \u00e0 des explications d\u00e9taill\u00e9es et des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>background-origin<\/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\/586651362?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    window.closePopup = function() {\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-origin<\/code> en CSS permet de sp\u00e9cifier l&rsquo;origine de l&rsquo;image d&rsquo;arri\u00e8re-plan d&rsquo;un \u00e9l\u00e9ment. Elle d\u00e9termine la zone hors de laquelle l&rsquo;image commence \u00e0 se r\u00e9p\u00e9ter, en fonction de ses dimensions et de la propri\u00e9t\u00e9 <code>background-position<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Valeurs de <strong>background-origin<\/strong><\/h3>\n\n\n\n<p>Il existe trois principales valeurs que vous pouvez utiliser avec <code>background-origin<\/code> :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><code>border-box<\/code> : L&rsquo;arri\u00e8re-plan commence \u00e0 partir de la bordure de l&rsquo;\u00e9l\u00e9ment.<\/li>\n  <li><code>padding-box<\/code> : L&rsquo;arri\u00e8re-plan commence \u00e0 partir du bord interne du padding de l&rsquo;\u00e9l\u00e9ment.<\/li>\n  <li><code>content-box<\/code> : L&rsquo;arri\u00e8re-plan commence \u00e0 partir du bord du contenu de l&rsquo;\u00e9l\u00e9ment.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples de <strong>background-origin<\/strong> en CSS<\/h3>\n\n\n\n<p>Voyons comment ces valeurs se manifestent dans la pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Exemple avec border-box *\/\n.example-border-box {\n  background-image: url('background.jpg');\n  background-origin: border-box;\n  border: 10px solid #000;\n  padding: 20px;\n  background-repeat: no-repeat;\n}\n\n\/* Exemple avec padding-box *\/\n.example-padding-box {\n  background-image: url('background.jpg');\n  background-origin: padding-box;\n  border: 10px solid #000;\n  padding: 20px;\n  background-repeat: no-repeat;\n}\n\n\/* Exemple avec content-box *\/\n.example-content-box {\n  background-image: url('background.jpg');\n  background-origin: content-box;\n  border: 10px solid #000;\n  padding: 20px;\n  background-repeat: no-repeat;\n}\n<\/code><\/pre>\n\n\n\n<p>Vous pouvez observer comment l&rsquo;image d&rsquo;arri\u00e8re-plan se positionne diff\u00e9remment avec chaque valeur. Essayez d&rsquo;utiliser diff\u00e9rentes valeurs de <code>background-origin<\/code> pour obtenir l&rsquo;effet visuel souhait\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9mo Interactive de <strong>background-origin<\/strong><\/h3>\n\n\n\n<div style=\"display: flex; gap: 20px;\">\n  <div class=\"example-border-box\" style=\"width: 150px; height: 150px; background-image: url('https:\/\/via.placeholder.com\/150');\">\n    <p>border-box<\/p>\n  <\/div>\n  <div class=\"example-padding-box\" style=\"width: 150px; height: 150px; background-image: url('https:\/\/via.placeholder.com\/150');\">\n    <p>padding-box<\/p>\n  <\/div>\n  <div class=\"example-content-box\" style=\"width: 150px; height: 150px; background-image: url('https:\/\/via.placeholder.com\/150');\">\n    <p>content-box<\/p>\n  <\/div>\n<\/div>\n\n\n\n<p>Ces bo\u00eetes d\u00e9montrent les diff\u00e9rents comportements de <code>background-origin<\/code>. Notez comment l&rsquo;arri\u00e8re-plan commence \u00e0 diff\u00e9rents points selon la valeur d\u00e9finie. Vous pouvez essayer de modifier le code CSS pour voir l&rsquo;impact de chaque valeur par vous-m\u00eame.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Pratiques de <strong>background-origin<\/strong><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-origin<\/code> est particuli\u00e8rement utile dans les cas o\u00f9 vous avez besoin de contr\u00f4les pr\u00e9cis sur la position de votre arri\u00e8re-plan, tels que :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Styles de bouton complexes o\u00f9 vous souhaitez que l&rsquo;image de fond commence \u00e0 partir du bord int\u00e9rieur du bouton.<\/li>\n  <li>Cartes ou sections avec des bordures o\u00f9 l&rsquo;arri\u00e8re-plan ne doit pas s&rsquo;\u00e9tendre jusqu&rsquo;aux bordures elles-m\u00eames.<\/li>\n  <li>Mise en page adaptative o\u00f9 le contexte de l&rsquo;affichage n\u00e9cessite un contr\u00f4le minutieux de l&rsquo;origine de l&rsquo;arri\u00e8re-plan pour s&rsquo;adapter \u00e0 diff\u00e9rents \u00e9crans et tailles.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner <strong>background-origin<\/strong> avec d&rsquo;autres Propri\u00e9t\u00e9s<\/h3>\n\n\n\n<p>Pour maximiser l&rsquo;utilit\u00e9 de <code>background-origin<\/code>, vous pouvez la combiner avec d&rsquo;autres propri\u00e9t\u00e9s CSS telles que <code>background-position<\/code> et <code>background-size<\/code> pour un contr\u00f4le encore plus fin de votre arri\u00e8re-plan.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.custom-background {\n  background-image: url('background.jpg');\n  background-origin: content-box;\n  background-position: center center;\n  background-size: cover;\n  border: 10px solid #000;\n  padding: 30px;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette combinaison permet d&rsquo;avoir un arri\u00e8re-plan bien centr\u00e9 et couvrant enti\u00e8rement l&rsquo;\u00e9l\u00e9ment contenu, tout en respectant les dimensions internes contr\u00f4l\u00e9es par <code>background-origin<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La propri\u00e9t\u00e9 <strong>background-origin<\/strong> en CSS est un outil puissant pour tous les d\u00e9veloppeurs front-end cherchant \u00e0 ma\u00eetriser la stylisation des arri\u00e8re-plans d&rsquo;\u00e9l\u00e9ments. Que vous soyez en train de cr\u00e9er des boutons, des cartes ou des sections vari\u00e9es, cette propri\u00e9t\u00e9 vous permet d&rsquo;obtenir des r\u00e9sultats visuels pr\u00e9cis et esth\u00e9tiques. Continuez \u00e0 exp\u00e9rimenter avec <code>background-origin<\/code> et d&rsquo;autres propri\u00e9t\u00e9s CSS pour am\u00e9liorer vos comp\u00e9tences en web design.<\/p>\n\n<p>Pour plus de tutoriels CSS, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/152\">fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/tutoriel-ajouter-des-animations-css\">tutoriel sur l&rsquo;ajout des animations CSS<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/fixer-arriere-plan-css-background-attachment\">fixer l&rsquo;arri\u00e8re-plan avec CSS<\/a> et explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-avances-css-techniques\">s\u00e9lecteurs avanc\u00e9s en CSS<\/a> pour un contr\u00f4le encore plus pr\u00e9cis de vos styles. Pour comprendre comment la hi\u00e9rarchie CSS fonctionne, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\">guide sur les combinateurs CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2021\/07\/css-course-banner.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS - Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour en savoir plus sur l&rsquo;origine de l&rsquo;arri\u00e8re plan (background-origin) et d&rsquo;autres propri\u00e9t\u00e9s CSS, vous pouvez consulter des ressources externes telles que <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/\" target=\"_blank\" rel=\"nofollow noopener\">CSS-Tricks<\/a>, <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-origin\" target=\"_blank\" rel=\"nofollow noopener\">MDN Web Docs<\/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\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Origine de l\u2019Arri\u00e8re-Plan en CSS : background-origin est une propri\u00e9t\u00e9 utile permettant de contr\u00f4ler d&rsquo;o\u00f9 commence l&rsquo;arri\u00e8re-plan de votre \u00e9l\u00e9ment. Comprendre comment utiliser cette&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2753,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5393","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\/5393","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=5393"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5393\/revisions"}],"predecessor-version":[{"id":5394,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5393\/revisions\/5394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2753"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}