/* ========================================================= ML – Site Background (paper texture) - Beige global partout (y compris header/hero) - Footer bleu uniquement Notes : - Divi met souvent des fonds (wrappers/sections) qui masquent le body. - Cette version utilise un overlay ::before avec opacité réglable. ========================================================= */ :root{ /* Réglages rapides */ --ml-bg-paper-color: #f3ebeb; --ml-bg-paper-size: 900px; /* "zoom" de la texture */ --ml-bg-paper-opacity: 1; /* intensité (0 à 1) */ --ml-footer-color: #15325b; --ml-footer-size: 900px; --ml-footer-opacity: 1; } /* 1) Fond global beige : couleur de base + overlay texture */ html, body{ background: var(--ml-bg-paper-color); } /* Overlay texture global (opacité réglable) */ body::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("../img/Background-beige.jpg"); background-repeat: repeat; background-size: var(--ml-bg-paper-size) auto; background-position: 0 0; opacity: var(--ml-bg-paper-opacity); /* Rend souvent la texture plus "papier" sur une base claire */ mix-blend-mode: normal; } /* Assure que le contenu passe au-dessus de l’overlay */ body{ position: relative; z-index: 1; } /* ========================================================= 1bis) Divi : enlever les fonds "blancs" qui masquent le body - Objectif : laisser apparaître la texture sous TOUTES les sections - Divi met souvent un fond sur les wrappers (page container / main area) ========================================================= */ /* Wrappers principaux Divi */ #page-container, #et-main-area, #main-content, .et_builder_inner_content, .et-l, .et-l--body{ background: transparent !important; } /* Sections / rows : par défaut transparent pour laisser voir la texture */ .et_pb_section, .et_pb_row{ background-color: transparent; } /* Si une section/row a un background défini en inline par Divi, on le laisse */ .et_pb_section[style*="background"], .et_pb_row[style*="background"]{ background-color: initial; background-image: initial; } /* ========================================================= 2) Footer bleu uniquement Divi peut rendre le footer via #main-footer (thème) ou .et-l--footer (Theme Builder). On couvre les deux cas. ========================================================= */ #main-footer, .et-l--footer{ position: relative; z-index: 2; /* au-dessus de l’overlay beige */ background-color: var(--ml-footer-color)!important; /* opaque = masque le beige */ } /* Texture bleue en overlay (permet d’ajuster l’opacité indépendamment) */ #main-footer::before, .et-l--footer::before{ content:""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("../img/background-bleu.jpg"); background-repeat: repeat; background-size: var(--ml-footer-size) auto; background-position: 0 0; opacity: var(--ml-footer-opacity); mix-blend-mode: normal; /* <-- clé: évite le rendu grisâtre */ } /* Contenu du footer au-dessus de son overlay */ #main-footer > *, .et-l--footer > *{ position: relative; z-index: 1; } /* Sécurité : évite qu’un fond interne du footer casse l’effet */ #main-footer .et_pb_section, #main-footer .et_pb_row, .et-l--footer .et_pb_section, .et-l--footer .et_pb_row{ background-color: transparent; } /* ========================================================= Mode debug (à activer en ajoutant la classe ml-bg-debug sur ) Exemple via DevTools console : document.body.classList.add('ml-bg-debug') ========================================================= */ body.ml-bg-debug::before{ opacity: .45; outline: 3px dashed rgba(255,0,0,.35); } /* Force la base papier même si Divi remet body en blanc */ body{ background-color: var(--ml-bg-paper-color) !important; } /* Laisse apparaître le fond global sous les sections Divi */ #page-container, #et-main-area, #main-content, .et_builder_inner_content, .et-l--body{ background: transparent !important; } .et_pb_section, .et_pb_row{ background-color: transparent; background-image: none; } /* Si Divi a mis un background inline sur la section, on ne casse pas */ .et_pb_section[style*="background"], .et_pb_row[style*="background"]{ background-color: initial !important; background-image: initial !important; } /* ========================================================= Divi overlays (masks/patterns) qui masquent le fond global On les neutralise uniquement quand la section/row N'A PAS un background volontaire (classe .et_pb_with_background). ========================================================= */ /* 1) Pseudo-éléments de sections/rows (souvent utilisés pour overlay) */ .et_pb_section:not(.et_pb_with_background)::before, .et_pb_section:not(.et_pb_with_background)::after, .et_pb_row:not(.et_pb_with_background)::before, .et_pb_row:not(.et_pb_with_background)::after{ background: transparent !important; background-image: none !important; opacity: 0 !important; content: none !important; display: none !important; } /* 2) Couches Divi : mask / pattern / overlay internes */ .et_pb_section:not(.et_pb_with_background) .et_pb_background_mask, .et_pb_section:not(.et_pb_with_background) .et_pb_background_pattern, .et_pb_section:not(.et_pb_with_background) .et_pb_section_video_bg, .et_pb_section:not(.et_pb_with_background) .et_parallax_bg_wrap{ display: none !important; } /* 3) Certains wrappers peuvent aussi avoir des pseudo-éléments */ #page-container::before, #page-container::after, #et-main-area::before, #et-main-area::after, #main-content::before, #main-content::after{ content: none !important; display: none !important; }