엘리먼트를 배경처럼 활용하는 CSS 예제

 

<div class="backGround"></div>

<div class="main">

    <ul>

        <li>

            <div></div><p>엘리먼트를 배경처럼 활용하기</p>

        </li>

    </ul>

</div>

 

body, ul {

    margin: 0;

    padding: 0;

}

 

body {

    background-color: #d2d1d1;

}

 

.backGround {

    position: fixed;

    z-index: 0;

    height: 100vh;

    top: 0px;

    right: 0;

    left: 0;

    width: 75vw;

    margin: auto;

    background-color: white;

    box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.1);

}

 

.main {

    position: relative;

    z-index: 1;

    padding: 20px;

}

 

li {

    display: flex;

    flex-direction: row;

}

 

li div {

    display: flex;

    background-image: url(https://cdn.pixabay.com/photo/2016/01/20/11/11/baby-1151351__340.jpg);

    width: 50px;

    height: 50px;

    background-size: cover;

    background-position: center center;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}

 

li p {

    margin-left: 20px;

}