배경 이미지 삽입/정렬

이미지 삽입/정렬

배경에 이미지를 삽입할 때 항상 같이 따라 다니는 3줄의 코드가 있다.

이미지 주소 - 위치 - 사이즈

.background {
    width: 400px;
    height: 800px;

    background-image: url('이미지 주소');
    background-position: center;
    background-size: cover;
}

 

화면 이미지 비율

모바일에서 볼 수 있는 반응형 웹페이지를 만들고자 할 때, 화면의 크기에 따라 보여지는 이미지의 크기가 달라지게 만들 것이다.

이 때 vw 단위를 사용하면 화면의 크기에 따라서 이미지의 크기가 늘어나고 줄어든다.

.background {
    width: 100vw;
    height: 100vh;
    
    max-width: 450px;
}

하지만 100% 화면 크기에 맞춘다면 PC화면에서 본다고 가정했을 때는 이미지가 확대되어서 보여지기 때문에 최대 가로/세로 길이를 정해줄 필요가 있다.