I'm working with a 3rd party platform so my HTML structure is what it is. But I do have the ability to add any CSS or JS I like.
While creating a layout using only CSS Grid, I positioned one of the cells to underlay several others. That cell has a background image applied with background-attachment: fixed; and background-size: cover;. Instead of the background image being fixed to the top of its grid cell, it is instead being fixed to the top of the parent grid.
In the example I'm including you'll see the animals head is being cut off by the header because the background image is "fixed" to the top of the grid div rather than the #background-image cell div. The odd thing is that if I inspect the cell, or if you look at the red border around that div, everything looks to be in the right place, it's just the background image that's out of place.
Example: https://codepen.io/4SiteStudios/pen/qBBaqbW
body {
font-family: "segoe ui", helvetica;
margin: 0;
}
#the-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 250px 150vh;
grid-template-areas:
"header"
"main";
}
#header,
#main,
#background-image {
padding: 1rem;
font-weight: bold;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
}
/* Grid Cells */
#header {
grid-area: header;
background-color: rgba(128, 0, 128, 0.5);
border: 5px solid rgba(128, 0, 128, 1);
}
#main {
grid-area: main;
border: 5px dashed rgba(255, 255, 255, 1);
}
#background-image {
background-image: url("https://i.imgur.com/XqhygDC.jpg");
background-attachment: fixed;
background-size: cover;
background-position: top right;
grid-row: 2 / 6;
grid-column: 1 / 7;
z-index: -1;
padding-top: 3rem;
border: 5px solid rgba(255, 0, 0, 1);
color: rgba(255, 0, 0, 1);
}<section id="the-grid">
<div id="header">
Header
</div>
<div id="main">
Main
</div>
<div id="background-image">
Background Image
</div>
</section>Thoughts?