1. 배경색과 배경 범위 지정
배경색 지정
background-color: #999;
background-color: yellow;
배경색 적용 범위 지정
background-clip: border-box /* 테두리 배경 까지 지정 */
background-clip: padding-box /* 테두리를 뺀 패딩 범위까지 지정 */
background-clip: content-box /* 콘텐츠에만 배경 지정 */
2. 배경 이미지 지정
1) 배경 이미지 속성
🚀 배경 이미지 속성은 특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일 속성
background-image : url(이미지 경로) / 배경 이미지 경로
<head>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 적용하는 기본 방식 */
background-image: url("img/cat_bg.png");
background-color: cadetblue;
/* background: cadetblue url("img/cat_bg.png") */
}
</style>
</head>
🚀 배경 이미지를 2개 이상 적용하는 경우 왼쪽에 위치한 이미지가 앞으로 나온다
<head>
<style>
* {
margin: 0;
padding: 0;
}
body { /* 배경 이미지를 2개 이상 적용하는 기본 방식 */
background-image: url("img/cat_bg.png'), url("img/land.png");
}
</style>
</head>
<body>
2) background-size 속성
🚀 배경 이미지에 대한 size를 지정하기 위한 값
💡 background-size : 100%, cover, contain, px값 < 배경 이미지 크기 >
a. auto : 기본 값. 원래 배경 이미지 크기만큼 표시
b. contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대,축소 (이미지 잘리는 부분이 없다 )
c. cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소 (이미지 잘리는 부분이 생길 수 있다 )
d. 크기 : 너비와 높이를 지정
e. 백분율 : 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정
💡 background-repeat : repeat, repeat-x, repeat-y, no-repeat < 배경 이미지 반복 >
a. repeat : 기본값. 브라우저 화면에 가득 찰 때까지 가로와 세로 반복
b. repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로로 반복
c. repeat-y : 브라우저 화면 너비에 가득 찰 때까지 세로로 반복
d. no-repeat : 한 번만 표시하고 반복하지 않는다
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url("img/art.jpg");
background-size: 100%;
/* 배경 이미지 사이즈 100%는 (body 태그에 적용한 경우) 브라우저의 가로 길이를 기준으로 100%.
상대 크기라서 브라우저 폭을 줄이면 같이 줄어듦.
*/
background-repeat: no-repeat;
}
</style>
</head>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url("img/art.jpg");
background-size:500px;
background-repeat: repeat-x;
}
</style>
</head>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url("img/art.jpg");
background-size: 100% 500px;
/* 배경 이미지 크기 100%는 브라우저 가로 길이를 기준으로 100% */
/* 100%(가로 크기), 500px(세로 크기) */
background-repeat: no-repeat;
}
</style>
</head>
3) background-attachment 속성
🚀 배경 이미지를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면서 배경 이미지도 함께 이동하는 경우가 있다
➡️ 이 속성을 사용하면 배경 이미지를 고정할 수 있음
💡 background-attachment : fixed, scroll < 스크롤에 따른 조정 >
a. scroll : 기본값. 스크롤 바의 움직임에 따라 배경 이미지도 움직임
b. fixed : 브라우저 화면에서 스크롤 바를 움직이더라도 배경 이미지는 고정되어 있음
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url("img/art.jpg");
background-size: 100%;
background-repeat: no-repeat;
height: 3000px; /* 브라우저 화면에 세로 스크롤 바를 생성시키기 위해 높이값 적용 */
background-attachment: fixed; /* 브라우저 화면에서 스크롤 바를 움직이더라도 배경 이미지는 고정되어 있음 */
}
</style>
</head>
4) background-position 속성
🚀 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다
🚀 속성 값 하나만 지정한다면 수평 위칫값으로 간주
background-position. : <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>
ex. background-position: 30% 60%;
▶️ 가로 30% 세로 60% 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.
5) background-origin 속성
🚀 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.
💡 background-origin: content-box | padding-box | border-box
a. content-box : 박스 모델 내용 부분에만 배경 이미지 표시
b. padding-box : 박스 모델 패딩까지 배경 이미지를 표시. 기본 값.
c. border-box : 박스 모델에서 테두리까지 배경 이미지를 표시
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 목록 스타일, 표 스타일 (1) | 2024.03.23 |
|---|---|
| [CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 (0) | 2024.03.23 |
| [CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0) | 2024.03.21 |
| [CSS] 수직 중앙 정렬 방법, overflow와 scroll (0) | 2024.03.21 |
| [CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding] (0) | 2024.03.20 |