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%;
...
}
'CSS' 카테고리의 다른 글
[CSS] Page Layout (0) | 2023.07.31 |
---|---|
[CSS] Transition & Animation (0) | 2023.07.28 |
[CSS] Typography (0) | 2023.07.28 |
[CSS] Media Query (0) | 2023.07.27 |
[CSS] Flexbox (0) | 2023.07.27 |