Make a layout with the same image background separate in 3 div

February 3, 2022

I’am trying to make a layout based in 3 part with the same picture.

I have 3 divs with different sizes and I’m trying to have the same background image in the div, I want the image to be visible only in the div and outside the boxes i want a color.

What it looks like so far (I added opacity so you can understand)

Thanks for your help.

.pannel {
  position: absolute;
  /* margin-top: 250px; */
  background-attachment: fixed;
  background: url('https://via.placeholder.com/1200');
  background-size: cover;
  background-repeat: no-repeat;
  height: 800px;
  width: 100%;
}

.wrap {
  position: absolute;
  display: flex;
  justify-content: space-around;
  background-color: #5CB8BD;
  opacity: 0.5;
  width: 100%;
}

.mid {
  padding: 400px 10%;
}

.left,
.right {
  padding: 300px 10%;
  align-self: center;
}

.mid,
.left,
.right {
  background-color: none;
  border: solid 1px black;
}

<section class="pannel">
  <div class="wrap">
    <article class="left"></article>
    <article class="mid"></article>
    <article class="right"></article>
  </div>
</section>

>Solution :

Do like this this is more easier

body{
  margin: 15px;
  padding: 0;
}

.bg{
  background: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
}

.container{
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(3, 1fr);
}

.container div{
  height: 220px;
  background-size: cover;
  background-attachment: fixed;
}

.container div:nth-child(1){
  grid-column: 1 / 3;
}

.container div:nth-child(7){
  grid-column: 2 / 4;
}

.container div:nth-child(11){
  grid-column: 1 / 4;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CSS Grid Layout With Background Image</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="container">
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
    </div>

  </body>
</html>