Background Image Not Covering Full Container Height with CSS Grid in Firefox 117
I'm relatively new to this, so bear with me. I'm having trouble getting a background image to fully cover the height of a grid container in Firefox 117. My layout works as intended in Chrome, but in Firefox, the image is cutting off at the bottom, and I'm not sure why. The CSS I'm using is as follows: ```css .container { display: grid; grid-template-rows: auto 1fr; height: 100vh; background-image: url('path/to/image.jpg'); background-size: cover; background-position: center; } .header { grid-row: 1 / 2; height: 60px; background-color: rgba(255, 255, 255, 0.8); } .content { grid-row: 2 / 3; padding: 20px; background-color: #f0f0f0; } ``` The image should naturally fill the container, but in Firefox, it seems to only cover the area above the header and not the entire grid area. I have tried changing `background-size` to `contain` and `auto`, but the image doesn’t fill the space properly and leaves a lot of empty space. I've also confirmed that this scenario doesn't occur in Chrome. Here’s a simplified HTML structure: ```html <div class="container"> <div class="header">Header</div> <div class="content">Content goes here</div> </div> ``` I cleared the browser cache, checked for any CSS overrides, and used the Firefox Developer Tools to inspect the element, but I need to find anything wrong. Has anyone experienced this scenario before, and if so, how did you resolve it? Any help would be appreciated! I recently upgraded to Css LTS. Thanks, I really appreciate it!