在CSS网格中使用背景图像

hwamh0ep 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(143)

我正在尝试使用CSS网格来允许图像填充网页。我可以使用CSS属性“background-image”在使用CSS网格之外完成此操作。但是，当我尝试在容器内的项目中使用background-image时，它只显示图像的一小部分-换句话说，它不会填充页面。请您有什么想法！

<!DOCTYPE html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    body, html {
        width: 100%;
        height: 100%;
    }

    .grid-container {
        display: grid;
        /* grid-template-columns: repeat(12, 1fr); */
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 100px 100% 100px;
    }

    .grid-item1-header {
        grid-column: 1 / span 3;
        grid-row: 1 / 2;

        top: 0;
        background-color: #262626;
    }

    .grid-item2-main-img {
        grid-column: 1 / span 3;
        grid-row: 2 / 3;

        height: 100%;

        /*background-color: red;*/

        background-image: url("img/hole.jpg");            
        background-repeat: no-repeat;
        background-size: cover;  /* covers the entire area */
}

    .grid-item3-footer {
        grid-column: 1 / span 3;
        grid-row: 3 / 4;

        bottom: 0;
        background-color: #262626;
    }


</style>
</head>

<body>

<div class='grid-container'>

        <div class='grid-item1-header'></div>
        <div class='grid-item2-main-img'></div>
        <div class='grid-item3-footer'></div>

</div>

</body>
</html>




I have tried altering the height: 1000px; and this works, but I would like it to automatically fill the screen using an item inside CSS grid.

css

来源：https://stackoverflow.com/questions/75693169/using-background-image-in-css-grid