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>