[CSS] Background

 

background-color

배경 색상

hex, rgb, rgba로 표현합니다.

.bg {
	background-color: #fff;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 1);
}

 

 

 

background-image

배경 이미지

url( )을 필수적으로 사용해야 합니다.

.bg {
	background-iamge: url('./assets/img1.jpg');
    backgound-image: url('https://plus.unsplash.com/premium_photo-1690164161383-f5ff30a790bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=685&q=80');
}

웹 이미지 경로도 url에 넣을 수 있습니다.

 

 

 

background-repeat

이미지 반복

.bg {
	background-repeat: no-repeat;
    /* repeat | no-repeat */
}

기본값은 repeat입니다.

 

 

 

background-size

배경 사이즈

.bg {
	background-size: contain;
    /* contain | cover | 커스텀*/
}

 

contain: 화면에 이미지 전부가 들어가게 합니다.

cover: 이미지가 화면에 꽉 차게 합니다.

커스텀: 사용자 지정 

ex) 50% auto | 100% auto | 300px 400px | auto 100%

 

 

 

background-position

x,y 축으로 얼마만큼 움직이는지 정해줍니다.

.bg {
	background-position: center center;
    background-position: left bottom;
    background-position: 100px 300px;
    background-position: 50% 50%;
    ...
}