tentative grid pour background image

user/themes/epau-antimatter/css-compiled/template.css

@@ -847,6 +847,42 @@ ul.pagination {
   text-align: left;
   padding-bottom: 3rem; }
 
+#background {
+  background-color: #d5d2d1;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(8, 5vw);
+  grid-gap: 15px; }
+
+#background img {
+  width: 100% !important;
+  height: 100%;
+  object-fit: cover; }
+
+.item-1 {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 5; }
+
+.item-2 {
+  grid-column-start: 3;
+  grid-column-end: 5;
+  grid-row-start: 1;
+  grid-row-end: 5; }
+
+.item-3 {
+  grid-column-start: 5;
+  grid-column-end: 1;
+  grid-row-start: 9;
+  grid-row-end: 6; }
+
+.item-4 {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3; }
+
 .programmes {
   display: flex;
   flex-wrap: wrap;
@@ -858,7 +894,7 @@ ul.pagination {
   padding-bottom: 8rem; }
 
 .programme {
-  max-width: 45%;
+  max-width: 35%;
   padding: 1.5rem;
   background-color: white;
   margin: 0.4rem; }
@@ -944,6 +980,9 @@ ul.pagination {
 .portrait {
   background: transparent !important; }
 
+.portrait img {
+  max-width: 15rem !important; }
+
 img.portrait {
   width: 20%; }
 
@@ -1044,9 +1083,8 @@ img.portrait {
   padding-right: 50%; }
 
 .modular .features {
-  padding: 2rem 8rem;
-  text-align: center;
-  align-content: center; }
+  width: 75%;
+  margin: auto; }
   .modular .features:after {
     content: "";
     display: table;

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -86,9 +86,52 @@
   padding-bottom: 3rem;
 }
 
+// fond images en grille pour parallax
+
+#background {
+    background-color: #d5d2d1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(8, 5vw);
+    grid-gap: 15px;
+}
+
+#background img {
+    width: 100% !important;
+    height: 100%;
+    object-fit: cover;
+}
+
+.item-1 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 5;
+}
+
+.item-2 {
+    grid-column-start: 3;
+    grid-column-end: 5;
+    grid-row-start: 1;
+    grid-row-end: 5;
+}
 
+.item-3 {
+    grid-column-start: 5 ;
+    grid-column-end: 1;
+    grid-row-start: 9;
+    grid-row-end: 6;
+}
+
+.item-4 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
 
 .programmes {
+
   display: flex;
   flex-wrap: wrap;
   background-color: #d5d2d1;
@@ -101,7 +144,8 @@
 }
 
     .programme {
-      max-width: 45%;
+      max-width: 35%;
+      // min-width:
       padding: 1.5rem;
       background-color: white;
       margin: 0.4rem;
@@ -116,6 +160,7 @@
     .programme img {
       max-height: 15%;
     }
+
     .programme p {
       font-family: $font-family-default;
       font-weight: 500;
@@ -127,6 +172,10 @@
       transition:0.2s ease-in-out;
     }
 
+    // .parallax {
+    //   display: block;
+    // }
+
 //
 //     /* .titre_nsb {
 //       display: block;
@@ -298,10 +347,14 @@
 .portrait {
   // max-width:50% !important;
   background: transparent !important;
+}
 
+.portrait img {
+    max-width: 15rem !important;
 }
 
 img.portrait {
+
   width: 20%;
 }
 

user/themes/epau-antimatter/scss/template/modular/_features.scss

@@ -8,9 +8,10 @@
 
     .features {
 
-        padding: 2rem 8rem;
-        text-align: center;
-        align-content: center;
+        width: 75%;
+        margin: auto;
+
+
         @include clearfix;
 
         h2 {

user/themes/epau-antimatter/templates/modular/programmes.html.twig

@@ -1,8 +1,30 @@
+<!-- <div class="background">
+  <img src="{/pages/02._programmes/10361_web_01.jpg}">
+</div>
+ -->
+ <div id="background">
+
+   <figure class="item-1">
+     <img src="/user/themes/epau-antimatter/images/14360_default_big.jpg" class="background__img" alt="Image 1">
+   </figure>
+   <figure class="item-2">
+     <img src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" class="background__img" alt="Image 2">
+   </figure>
+   <figure class="item-3">
+     <img src="/user/themes/epau-antimatter/images/10361_web_01.jpg" class="background__img" alt="Image 3">
+   </figure>
+   <figure class="item-4">
+     <img src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" class="background__img" alt="Image 4">
+   </figure>
+
+ </div>
+
 <div class="programmes{{ page.header.class}}">
   <!-- <div class="parallax-window" data-parallax="scroll" data-image-src="{/pages/02._programmes/10361_web_01.jpg}"></div> -->
     {{ content|raw }}
 
 
+
 {#
 <div class="paralax-bg">
   </div>

user/themes/epau-antimatter/templates/modular/ressources.html.twig

@@ -5,7 +5,7 @@
 
 <div class="features {{ page.header.class}}">
 
-
+  <div class="feature-items">
     {% for rapport in page.header.rapports %}
 
         <div class="feature">
@@ -25,5 +25,6 @@
 
         </div>
     {% endfor %}
+  </div>  
 
 </div>