CSS 배경에 이미지 추가시 가운데 정렬하기

 

 

 

CSS에서 이미지 추가시 이미지 중앙으로 이쁘게 배치하는 방법

 

아래와 같이 적용.

background-position : center

background-image: cover

 

<style>

.mypic {
            width: 100%;
            height: 200px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
</style>