ajust

user/themes/lecampus/scss/theme/_blog.scss

@@ -70,12 +70,24 @@
 .bandeau{
   width: 100%;
   height: auto;
-  overflow: hidden;
+  position: relative;
-  display: flex;
+  &::before{
-  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+    position: absolute;
-  background-repeat: no-repeat;
+    display: block;
-  background-position: center;
+    content: ' ';
-  background-size: cover;
+    background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: -1;
+  }
+  .img{
+    width: 70%;
+    margin: auto;
+  }
   .title_gal{
     position: absolute;
     right: 25%;
@@ -91,10 +103,6 @@
       line-height: 2.2rem;
     }
   }
-  img{
-    width: 70%;
-    margin: auto;
-  }
 }
 
 .container{

user/themes/lecampus/templates/partials/bandeau.html.twig

@@ -24,7 +24,9 @@
   {% set image = page.media.images|first %}
     {% if image %}
     <div class="bandeau">
+      <div class="img">
       {{ image.html('','bandeau') }}
+    </div>
       {% if header.txtimg.text %}
       <div class="title_gal">
         <p>{{header.txtimg.text}}</p>