CSS_background

Background 속성을 공부해보자!

- background color : 배경색

• none : 없음
• transparent : 투명함 (default)

css
.div {
background-color : transparent; 
}

- background gradient : 배경 그라데이션

• 위 -> 아래 방향 (기본)

css 
. div { 
	background: linear-gradient(blue, pink);
	background: linear-gradient(to right, blue, pink);
	background: linear-gradient(75deg, royalblue, pink);
	background: linear-gradient(0.2turn, royalblue, pink);
	background: linear-gradient(blue, 20%, pink);
	background: linear-gradient(blue, pink, green);
	background: linear-gradient(blue, 20%, pink, 50%, green);
}

- background image : 배경 이미지

• none : 이미지 없음
• url() : 이미지 경로
• repeat : 이미지 반복 (default 값)

 css
 
backgroundImage {
  width: 600px;
  height: 500px;
  background-color: lightcoral;

  /* 이미지 없음 */
  background-image: none;

  /* 이미지 경로 */
  background-image: url(./image/Owl_image.png);

  /* 이미지 반복 */
  background-repeat: repeat; /* default 값 */
  /* background-repeat: repeat-x; */
  /* background-repeat: repeat-y; */
  /* background-repeat: no-repeat; */
}

- background position : 배경 이미지 위치

• 수평 : left, center, right
• 수직 : top, center, bottom

  /* background-position: center; */
  /* background-position: left top;  */
  /* 왼쪽 위 정렬*/
  /* background-position: right bottom;  */
  /* 오른쪽 아래 정렬*/
  /* background-position: 30px 100px;  */
  /* 왼쪽에서 30px, 위에서 100px*/
  /* background-position: 200px;  */
  /* 값이 하나만 있으면 수평 위치만 설정, 수직은 기본값 cetner로 설정 */

- background size

• 첫 번째는 너비 (width), 두 번째는 높이(height)
  ex) background-size: 30px, 50px
• auto : 이미지의 실제 크기
• cover : 요소의 더 넓은 너비에 맞춤
• contain : 요소의 더 짧은 너비에 맞춤

- scroll : 배경 이미지 스크롤 특성

• overflow : scroll;
  : 배경 이미지 스크롤 특성 (default)
• background-attachment: scroll;
  : 배경이 요소 자체를 기준으로 고정되며 콘텐츠오 함께 스크롤 되지 않음
• background-attachment: fixed;
  : 배경이 뷰포트를 기준으로 고정되어 화면을 스크롤해도 움직이지 않고,
  콘텐츠만 스크롤 됨
• background-attachment: local;
  : 배경이 요소의 내용에 대해 고정되며 컨테이너의 스크롤에 맞춰 같이
  움직임