CSS 그리드 안의 배경 사진 예제

 

<div class="grid">

    <article class="food"></article>

    <article class="food"></article>

    <article class="food"></article>

</div>

 

body {

    /* 모바일 기본 설정 */

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

 

.grid {

    overflow: scroll;

    display: grid;

    /* 반응형 */

    grid-auto-columns: minmax(200px, 1fr);

    grid-auto-flow: column;

    gap: 20px;

}

 

.food {

    height: 150px;

    border-radius: 10px;

}

 

.food:first-child {

    /* 그라데이션으로 명암을 조절 */

    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),

        url(https://cdn.pixabay.com/photo/2016/04/13/07/18/blueberry-1326154_1280.jpg);

    /* 반응형 */

    background-size: cover;

    background-position: center center;

}

 

.food:nth-child(2) {

    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),

        url(https://cdn.pixabay.com/photo/2017/11/18/17/09/strawberry-2960533__480.jpg);

    background-size: cover;

    background-position: center center;

}

 

.food:nth-child(3) {

    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),

        url(https://cdn.pixabay.com/photo/2016/07/22/09/59/fruit-1534494__480.jpg);

    background-size: cover;

    background-position: center center;

}