자바스프링웹공부(2024)/HTML, CSS

2024.09.13. CSS - 배경색과 배경이미지 background

thinkingofnickname 2024. 9. 16. 04:55
반응형

1. background-clip 속성

: 배경색이 칠해지는 범위조절  
   - background-clip: border-box; (테두리 영역까지, 기본값이다. = 아무것도 안적으면 border-box 적용됨.)
   - background-clip: padding-box; ( 패딩 역역까지 )
   - background-clip: content-box; ( content 영역까지 )

.desc {
	width: 100px;
	height: 100px;
	border: 5px dotted black;
	padding: 20px;
	color: #fff;
}
#clip-border {
	background-color: red;
	background-clip: border-box;
}
#clip-padding {
	background-color: red;
	background-clip:padding-box; 
}
#clip-content {
	background-color: red;
	background-clip: content-box;
}
<body>
	<div class="desc" id="clip-border">border-box</div>
	<div class="desc" id="clip-padding">padding-box</div>
	<div class="desc" id="clip-content">content-box</div>
</body>

[ 결과화면 ] 


2. background-image 속성 : 배경 이미지 넣기 
  - background-image: url('');

  - background-image: url("image4/bg2.png");

 

3. background-repeat 속성 : 배경 이미지 반복해서 표시하는 것을 조절.
  - background-repeat: repeat; /* 기본값: 반복해서 표시*/ 
  - background-repeat: repeat-x;  /* 가로방향만 반복 */
  - background-repeat: repeat-y;/* 세로방향만 반복 */
  - background-repeat: no-repeat; /* 반복안함. 위치 옮기고 사이즈 크기 변경도 가능. */

 

4.  background-size 속성 : 이미지 크기 변경

  - background-size: 150px 150px; /* 배경이미지 크기변경: background-size:가로 세로 */

 

5. background-position 속성 : 배경 이미지 위치 조정
  - background-position 속성 : 수평위치 수직위치
   수평위치 : left, center, right, 백분율(%), 값(px) 
   수직위치 : top, center, bottom, 백분율(%), 값(px) 

background-position: center top; /* 키워드로 저장 */
background-position: center; /* 수평위치와 수직위치가 동일하여 1번만*/
background-position: 50px 50px; 
/* background-position: 50px; /* 숫자로 지정할 때는 동일한 값이어도 2번 지정해야 올바른 결과가 나온다. */
background-position: 50% 100%; /* 백분율(%)로 지정 */

 

6. background 속성으로 한꺼번에 속성값 나열

background: url("image4/bg3.png") no-repeat right top fixed; /* 한번에 나열 가능! */

 

반응형