배경 이미지는 웹 요소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 때도 사용함.
그만큼 배경 이미지는 관련된 속성이 많다는 것이므로 잘 기억해 두셈.
>>>웹 요소에 배경 이미지를 넣는 background-image 속성
[기본형] background-image: url('이미지 파일 경로')
배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채움.
>>> 배경 이미지의 반복 방법을 지정하는 background-repeat 속성
배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있음.
>>> 배경 이미지의 위치를 조절하는 background-position 속성
배경 이미지의 수평 위치 또는 수직 위치의 값을 지정
[background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
>>> 배경 이미지의 적용 범위를 조절하는 background-origin 속성
박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있음.
>>> 배경 이미지를 고정하는 background-attachment 속성
배경 이미지가 있는 웹문서를 웹 브라우저에서 열고 스크롤 막대를 위아래롤 조절하면 문서전체가 움직이므로
배경 이미지도 함께 이동함.
>>>background 속성 하나로 배경 이미지 제어하기
배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있음.
예시)
body {
background-image: url('images/bg4.png');
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;
}
위의 코드를 하나로 묶으면?
background: url('images/bg4.png') no-repeat center bottm fixed;
>>> 배경 이미지 크기를 조절하는 background-size 속성
배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있음. 이 속성은 특히 화면에 배경 이미지를 가득 채워야 할 경우에도 유용함.
속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산함.
'Front-End > CSS' 카테고리의 다른 글
스타일 시트, 스타일 우선순위, 선택자 (0) | 2024.07.24 |
---|---|
09-3 그러데이션 효과로 배경 꾸미기 (0) | 2023.04.17 |
09-1 배경색과 배경 범위 지정하기 (0) | 2023.04.17 |
08장 정리하기 (0) | 2023.04.14 |
08-5 웹 요소의 위치 지정하기 (0) | 2023.04.14 |