{"id":5405,"date":"2024-08-27T18:21:06","date_gmt":"2024-08-27T18:21:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/propriete-raccourcie-background-css-guide\/"},"modified":"2024-08-27T18:21:09","modified_gmt":"2024-08-27T18:21:09","slug":"propriete-raccourcie-background-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/propriete-raccourcie-background-css-guide\/","title":{"rendered":"7.9 Propri\u00e9t\u00e9 Raccourcie Background en CSS : Guide"},"content":{"rendered":"\n<p><strong>La propri\u00e9t\u00e9 raccourcie Background en CSS<\/strong> est une technique essentielle pour embellir les pages web rapidement et efficacement. Comprendre et utiliser cette propri\u00e9t\u00e9 raccourcie vous permettra de g\u00e9rer les images de fond, les couleurs, les r\u00e9p\u00e9titions, les positions et plus encore, avec une seule ligne de code. Apprenons comment la ma\u00eetriser \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Propri\u00e9t\u00e9 raccourcie Background 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\/586651791?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<\/code> en CSS vous permet de d\u00e9finir tous les aspects d&rsquo;un arri\u00e8re-plan en une seule directive. Cela inclut la couleur, l&rsquo;image de fond, la r\u00e9p\u00e9tition, la position et la taille. Utiliser cette propri\u00e9t\u00e9 raccourcie peut simplifier votre CSS et le rendre plus lisible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Valeurs Accept\u00e9es par background<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background<\/code> accepte plusieurs valeurs, chacune ayant son propre r\u00f4le pour d\u00e9finir l\u2019apparence de l\u2019arri\u00e8re-plan :<\/p>\n<ul>\n  <li><code>background-color<\/code>: D\u00e9finir la couleur de fond.<\/li>\n  <li><code>background-image<\/code>: D\u00e9finir une image de fond.<\/li>\n  <li><code>background-repeat<\/code>: D\u00e9finir si l&rsquo;image de fond doit \u00eatre r\u00e9p\u00e9t\u00e9e.<\/li>\n  <li><code>background-position<\/code>: D\u00e9finir la position de l&rsquo;image de fond.<\/li>\n  <li><code>background-size<\/code>: D\u00e9finir la taille de l&rsquo;image de fond.<\/li>\n  <li><code>background-attachment<\/code>: D\u00e9finir si l&rsquo;image de fond est fixe ou d\u00e9file avec la page.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: #ffffff url('background.jpg') no-repeat center center \/ cover fixed;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques de la Propri\u00e9t\u00e9 Background<\/h3>\n\n\n\n<p>Nous allons maintenant voir quelques exemples pratiques pour mieux comprendre comment utiliser la propri\u00e9t\u00e9 <code>background<\/code> de mani\u00e8re efficace.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9finir une Couleur de Fond<\/h4>\n\n\n\n<p>La mani\u00e8re la plus simple d&rsquo;utiliser la propri\u00e9t\u00e9 <code>background<\/code> est de d\u00e9finir une couleur de fond :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: #f0f0f0;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajouter une Image de Fond<\/h4>\n\n\n\n<p>Pour ajouter une image de fond, vous pouvez combiner la couleur de fond avec une URL d&rsquo;image :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: url('background.jpg') no-repeat center center \/ cover;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Configurer la R\u00e9p\u00e9tition et la Position de l&rsquo;Image de Fond<\/h4>\n\n\n\n<p>Vous pouvez contr\u00f4ler la r\u00e9p\u00e9tition et la position de l&rsquo;image de fond pour obtenir l&rsquo;effet d\u00e9sir\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: #f0f0f0 url('background.jpg') repeat-x top left;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Maintenir l&rsquo;Image de Fond Fixe<\/h4>\n\n\n\n<p>Pour que l&rsquo;image de fond ne d\u00e9file pas avec le contenu de la page, utilisez <code>background-attachment: fixed;<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: #ffffff url('background.jpg') no-repeat center center \/ cover fixed;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Background en Conjonction avec D&rsquo;autres Propri\u00e9t\u00e9s CSS<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background<\/code> peut \u00eatre utilis\u00e9e de mani\u00e8re efficace avec d&rsquo;autres propri\u00e9t\u00e9s CSS pour cr\u00e9er des designs complexes et attrayants. Comparons des exemples combinant <code>background<\/code> avec des bordures et des ombres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.box {\n  width: 200px;\n  height: 200px;\n  margin: 20px auto;\n  background: #8e44ad url('pattern.png') no-repeat center;\n  border: 2px solid #2c3e50;\n  box-shadow: 0 0 10px rgba(0,0,0,0.5);\n}\n<\/code><\/pre>\n\n\n\n<p>En continuant d&rsquo;explorer la propri\u00e9t\u00e9 <code>background<\/code>, n&rsquo;oubliez pas de tester vos styles sur diff\u00e9rents appareils et navigateurs pour garantir une apparence coh\u00e9rente et r\u00e9active.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ajouter des Effets de Parallaxe<\/h4>\n\n\n\n<p>Vous pouvez \u00e9galement cr\u00e9er des effets de parallaxe en utilisant la propri\u00e9t\u00e9 <code>background<\/code> avec des images de fond. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.parallax {\n  height: 500px;\n  background: url('parallax.jpg') no-repeat center center \/ cover fixed;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de la Propri\u00e9t\u00e9 Background<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension, voici quelques exemples avanc\u00e9s montrant des utilisations complexes de la propri\u00e9t\u00e9 <code>background<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Images de Fond Multiples<\/h4>\n\n\n\n<p>Vous pouvez appliquer plusieurs images de fond sur un m\u00eame \u00e9l\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: \n    url('stars.png') left top repeat,\n    url('moon.png') center center no-repeat;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Effets de D\u00e9grad\u00e9 en Fond<\/h4>\n\n\n\n<p>Pour ajouter des d\u00e9grad\u00e9s en tant que fond sans image :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  background: linear-gradient(to right, #ff7e5f, #feb47b);\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Propri\u00e9t\u00e9s Background sur des Boutons<\/h4>\n\n\n\n<p>Appliquer des styles de fond int\u00e9ressants sur des boutons peut am\u00e9liorer l&rsquo;interactivit\u00e9 de votre site :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.btn {\n  padding: 10px 20px;\n  background: radial-gradient(circle, #7f8c8d, #2c3e50);\n  border: none;\n  border-radius: 5px;\n  color: #fff;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\n.btn:hover {\n  background: radial-gradient(circle, #2c3e50, #7f8c8d);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>propri\u00e9t\u00e9 raccourcie Background en CSS<\/strong> est une technique puissante et flexible pour styliser rapidement les arri\u00e8re-plans de vos \u00e9l\u00e9ments HTML. Que vous souhaitiez ajouter des couleurs de fond simples, des images, ou des effets complexes comme des d\u00e9grad\u00e9s et des images multiples, cette propri\u00e9t\u00e9 vous offre tout ce dont vous avez besoin dans une seule ligne de code. Continuez \u00e0 exp\u00e9rimenter avec ces options pour am\u00e9liorer l&rsquo;attrait visuel et l&rsquo;exp\u00e9rience utilisateur de vos sites web. Pour des bases solides en HTML, consultez notre article sur le <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">fonctionnement d&rsquo;un navigateur web avec HTML<\/a>. Si vous d\u00e9butez, apprenez les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">bases du langage HTML<\/a> pour ma\u00eetriser les fondamentaux. Vous pouvez \u00e9galement d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">cr\u00e9er votre premi\u00e8re page HTML<\/a> ou approfondir votre connaissance des <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\">\u00e9l\u00e9ments titres en HTML<\/a>. Pour plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/150\">les fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a> ou notre <a href=\"https:\/\/wikiform.fr\/codespace\/apprendre-le-css-gratuitement\">guide complet pour apprendre le CSS gratuitement<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-developpeur-web\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Web Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>La propri\u00e9t\u00e9 raccourcie Background en CSS est une technique essentielle pour embellir les pages web rapidement et efficacement. Comprendre et utiliser cette propri\u00e9t\u00e9 raccourcie vous&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2760,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5405","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\/5405","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=5405"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5405\/revisions"}],"predecessor-version":[{"id":5406,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5405\/revisions\/5406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2760"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}