{"id":5391,"date":"2024-08-27T17:52:53","date_gmt":"2024-08-27T17:52:53","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/repetition-arriere-plan-css-background-repeat\/"},"modified":"2024-08-27T17:52:56","modified_gmt":"2024-08-27T17:52:56","slug":"repetition-arriere-plan-css-background-repeat","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/repetition-arriere-plan-css-background-repeat\/","title":{"rendered":"7.2 R\u00e9p\u00e9tition de l\u2019Arri\u00e8re-Plan en CSS : background-repeat"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>R\u00e9p\u00e9tition de l\u2019Arri\u00e8re-Plan en CSS<\/strong> est une technique essentielle pour les d\u00e9veloppeurs web voulant am\u00e9liorer l&rsquo;aspect visuel de leurs sites. En utilisant la propri\u00e9t\u00e9 <code>background-repeat<\/code>, vous pouvez contr\u00f4ler la mani\u00e8re dont une image de fond se r\u00e9p\u00e8te, ce qui permet de cr\u00e9er des motifs ou simplement d&rsquo;optimiser l&rsquo;affichage des images de fond. Dans ce tutoriel, nous allons explorer comment utiliser <code>background-repeat<\/code> pour g\u00e9rer la r\u00e9p\u00e9tition des images de fond dans votre CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>background-repeat<\/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\/586651277?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 CSS <code>background-repeat<\/code> d\u00e9termine comment les images de fond sont r\u00e9p\u00e9t\u00e9es. Par d\u00e9faut, une image de fond se r\u00e9p\u00e8te horizontalement et verticalement pour remplir tout l&rsquo;\u00e9l\u00e9ment. Cependant, vous pouvez contr\u00f4ler cette r\u00e9p\u00e9tition de diff\u00e9rentes mani\u00e8res pour obtenir l&rsquo;effet souhait\u00e9. Voici quelques valeurs que vous pouvez utiliser avec <code>background-repeat<\/code>:<\/p>\n<ul>\n  <li><code>repeat<\/code>: R\u00e9p\u00e8te l&rsquo;image dans les deux directions (par d\u00e9faut).<\/li>\n  <li><code>repeat-x<\/code>: R\u00e9p\u00e8te l&rsquo;image uniquement horizontalement.<\/li>\n  <li><code>repeat-y<\/code>: R\u00e9p\u00e8te l&rsquo;image uniquement verticalement.<\/li>\n  <li><code>no-repeat<\/code>: Ne r\u00e9p\u00e8te pas l&rsquo;image.<\/li>\n  <li><code>space<\/code>: R\u00e9partit les images avec des espaces entre elles, sans les couper.<\/li>\n  <li><code>round<\/code>: Redimensionne les images pour qu&rsquo;elles se r\u00e9p\u00e8tent sans se couper.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>repeat<\/strong><\/h3>\n\n\n\n<p>La valeur par d\u00e9faut de <code>background-repeat<\/code> est <code>repeat<\/code>. Cela signifie que si vous d\u00e9finissez une image de fond sans sp\u00e9cifier la propri\u00e9t\u00e9 <code>background-repeat<\/code>, l&rsquo;image se r\u00e9p\u00e8tera dans les deux directions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    background-image: url('background.png');\n    background-repeat: repeat; \/* ou simplement omettre cette ligne *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>repeat-x<\/strong><\/h3>\n\n\n\n<p>Si vous souhaitez r\u00e9p\u00e9ter l&rsquo;image uniquement horizontalement, utilisez <code>repeat-x<\/code>. Cela peut \u00eatre utile lorsque vous avez une image de fond qui doit s&rsquo;\u00e9tendre uniquement sur l&rsquo;axe horizontal.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>header {\n    background-image: url('banner.png');\n    background-repeat: repeat-x;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>repeat-y<\/strong><\/h3>\n\n\n\n<p>Pour r\u00e9p\u00e9ter l&rsquo;image uniquement verticalement, utilisez <code>repeat-y<\/code>. Cela permet de cr\u00e9er des effets de barre lat\u00e9rale ou des s\u00e9parateurs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>sidebar {\n    background-image: url('vertical-stripes.png');\n    background-repeat: repeat-y;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>no-repeat<\/strong><\/h3>\n\n\n\n<p>Si vous ne souhaitez pas que l&rsquo;image se r\u00e9p\u00e8te du tout, utilisez <code>no-repeat<\/code>. Cela peut \u00eatre id\u00e9al pour les arri\u00e8re-plans d&rsquo;ent\u00eates ou de sections sp\u00e9cifiques.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>section {\n    background-image: url('header-background.png');\n    background-repeat: no-repeat;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>space<\/strong><\/h3>\n\n\n\n<p>La valeur <code>space<\/code> r\u00e9partit les images de fond en les espa\u00e7ant \u00e9galement dans l&rsquo;\u00e9l\u00e9ment, sans couper les images. Cela permet de cr\u00e9er un motif uniforme sans chevauchement des images.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div.pattern {\n    background-image: url('dots.png');\n    background-repeat: space;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>round<\/strong><\/h3>\n\n\n\n<p>La valeur <code>round<\/code> redimensionne l&rsquo;image pour qu&rsquo;elle se r\u00e9p\u00e8te sans \u00eatre coup\u00e9e et pour remplir l&rsquo;\u00e9l\u00e9ment. Cela peut \u00eatre utile lorsque vous voulez un motif continu sans espaces ni coupures.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>footer {\n    background-image: url('texture.png');\n    background-repeat: round;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques de <strong>background-repeat<\/strong><\/h3>\n\n\n\n<p>Voyons maintenant quelques cas pratiques pour illustrer l&rsquo;utilisation de <code>background-repeat<\/code> dans des projets r\u00e9els.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er un Arri\u00e8re-Plan de Barre de Navigation<\/h4>\n\n\n\n<p>Supposons que vous souhaitez cr\u00e9er une barre de navigation avec un motif horizontal. Utilisez <code>repeat-x<\/code> pour r\u00e9p\u00e9ter l&rsquo;image uniquement sur l&rsquo;axe horizontal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>nav {\n    background-image: url('nav-pattern.png');\n    background-repeat: repeat-x;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er une Banni\u00e8re de Site Web<\/h4>\n\n\n\n<p>Pour une banni\u00e8re qui ne doit pas se r\u00e9p\u00e9ter, utilisez <code>no-repeat<\/code> et positionnez l&rsquo;image au centre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.banner {\n    background-image: url('banner.jpg');\n    background-repeat: no-repeat;\n    background-position: center;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er un arri\u00e9re-plan textur\u00e9 pour un pied de page<\/h4>\n\n\n\n<p>Si vous souhaitez un fond textur\u00e9 pour le pied de page qui se r\u00e9p\u00e8te sans coupures, utilisez <code>round<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>footer {\n    background-image: url('footer-texture.png');\n    background-repeat: round;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-repeat<\/code> en CSS est un outil puissant pour contr\u00f4ler la r\u00e9p\u00e9tition des images de fond et am\u00e9liorer l&rsquo;apparence de vos sites web. En utilisant les diff\u00e9rentes valeurs de <code>background-repeat<\/code>, vous pouvez cr\u00e9er des motifs int\u00e9ressants et des designs coh\u00e9rents. Continuez \u00e0 exp\u00e9rimenter avec ces propri\u00e9t\u00e9s pour ma\u00eetriser l&rsquo;art de la cr\u00e9ation de fonds attractifs. Pour plus de tutoriels CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">HTML5 et CSS3<\/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-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n<h2 class=\"wp-block-heading\">Aller plus loin avec la r\u00e9p\u00e9tition de l&rsquo;arri\u00e8re-plan (background-repeat)<\/h2>\n\n\n<p>Comprendre comment le <code>background-repeat<\/code> fonctionne au sein de <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">fonctionnement navigateur web HTML<\/a> est essentiel pour adapter vos <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">bases du langage HTML<\/a> aux diff\u00e9rents types de dispositifs. Vous pouvez \u00e9galement voir comment int\u00e9grer et optimiser vos r\u00e9p\u00e9titions de fond dans un contexte plus large avec des \u00e9l\u00e9ments HTML divers tels que les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments HTML head<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Quelques astuces suppl\u00e9mentaires<\/h3>\n\n\n<p>Il est \u00e9galement int\u00e9ressant de noter comment la r\u00e9p\u00e9tition de l\u2019arri\u00e8re-plan s\u2019int\u00e8gre avec d\u2019autres propri\u00e9t\u00e9s CSS, en particulier celles relatives \u00e0 la gestion des <a href=\"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\" target=\"_blank\" rel=\"noopener\">feuilles de style en cascade<\/a> et \u00e0 l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/attributs-class-id-selecteurs-css\" target=\"_blank\" rel=\"noopener\">attributs class et ID<\/a>. Les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\" target=\"_blank\" rel=\"noopener\">outils d\u2019inspection<\/a> vous seront \u00e9galement d\u2019une grande aide pour visualiser et ajuster vos arri\u00e8re-plans en temps r\u00e9el.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Explorer d&rsquo;autres propri\u00e9t\u00e9s d&rsquo;arri\u00e8re-plan en CSS<\/h2>\n\n\n<p>En plus de <code>background-repeat<\/code>, il existe d&rsquo;autres propri\u00e9t\u00e9s d&rsquo;arri\u00e8re-plan qui sont tout aussi importantes. Par exemple, <code>background-size<\/code> peut s&rsquo;av\u00e9rer tr\u00e8s utile pour ajuster la taille des images de fond. Vous pouvez \u00e9galement utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/degrade-lineaire-css-linear-gradient\" target=\"_blank\" rel=\"noopener\">d\u00e9grad\u00e9s lin\u00e9aires<\/a> avec <code>background-image<\/code> pour cr\u00e9er des arri\u00e8re-plans plus dynamiques. Pour une gestion encore plus pr\u00e9cises, pensez \u00e0 explorer <a href=\"https:\/\/wikiform.fr\/codespace\/position-arriere-plan-css-guide-complet\" target=\"_blank\" rel=\"noopener\">la position d&rsquo;arri\u00e8re-plan<\/a> en CSS.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Ressources suppl\u00e9mentaires","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html R\u00e9p\u00e9tition de l\u2019Arri\u00e8re-Plan en CSS est une technique essentielle pour les d\u00e9veloppeurs web voulant am\u00e9liorer l&rsquo;aspect visuel de leurs sites. En utilisant la propri\u00e9t\u00e9&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5391","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\/5391","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=5391"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5391\/revisions"}],"predecessor-version":[{"id":5392,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5391\/revisions\/5392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2768"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}