Estoy tratando de hacer un diseño basado en 3 partes con la misma imagen.
Tengo 3 divs con diferentes tamaños y estoy tratando de tener la misma imagen de fondo en el div, quiero que la imagen sea visible solo en el div y fuera de los cuadros quiero un color.
Cómo se ve hasta ahora (agregué opacidad para que puedas entender)
Gracias por tu ayuda.
.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>Haz así esto es más fácil
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>