배경 스타일링

배경 스타일링

배경 색: background-color

• 배경의 색상을 넣는 속성

• 속성 값은 rgb() 또는 #으로 시작하는 hex, 색상 이름 등이 들어 갈 수 있습니다.

• 초기값 : background-color: transparent

예시

iv {
  background-color: #eee;
}

배경색을 투명하게 설정하기

• background-color에 transparent 또는 none값을 설정해주면 된다.

배경 위치: background-position

• left, center,right로 표현 할 수 있다.

• px이나 %등의 속성이 들어 올 수 있다.

• 값은 x 축 y 축으로 두 개를 띄어쓰기로 구분하여 넣는다.

좌표	값	이동
x	양수, 값 ↑	오른쪽
y	양수, 값 ↑	아래쪽
x	음수, 값 ↓	왼쪽
y	음수, 값 ↓	위쪽

div {
  background-position: 200px 20px;

  /* 또는 */
  background-position: 20% 0%; /* x y */

  /* 또는 */
  background-position: left top; /*기본값*/
}

배경 반복: background-repeat

background-image의 반복 여부 설정

div {
  background-repeat: repeat;    /*기본값*/
  background-repeat: no-repeat; /*반복 없음*/
  background-repeat: repeat-y;  /*y축으로 배경이미지 반복*/
  background-repeat: repeat-x;  /*x축으로 배경이미지 반복*/
}

배경 고정: background-attachment

• 화면 스크롤이 있을 경우 배경이미지를 고정할 수 있다

• background-position의 기준 점을 뷰포트(웹 페이지 화면)로 변경할 수 있습니다.

  div {
    background-attachment: fixed;
  }

배경 크기: background-size

배경 이미지의 크기 설정

배경 이미지: background-image

.bg-image {
  background: url('../image/aaa.jpg'); no-repaet center center;
  background-size: contain; /*이미지를 모두 박스 안에 포함한다*/
  background-size: cover; /*보여지는 부분은 위치속성으로 설정 가능, 화면 크기에 따라 사진의 크기가 달라지기 때문에 확인하기*/
}

패던(Patterns) 디자인

.is-floral {
  background: #000 url("../images/oriental-floral-pattern.svg");
  background-size: 50px; /* 패턴이미지 크기 조정 */
}

.is-model {
  background: url("../images/model.jpg") center;
  background-size: 150px;
}

배경 클리핑: background-clip

• 배경이미지의 클리핑 영역 설정

  • content-box

  • padding-box

  • border-box

• 항상 맨 아래에 속성을 입력해줘야 한다. 그래야 속성이 잘 적용된다.

배경 기준: background-origin

• 배경이미지의 시작에 대한 기준점 설정

  • content-box (기본값)

  • padding-box

  • border-box

.background-clip {
  box-sizing: border-box;
  border: 20px solid rgba(0, 0, 0, 2);
  padding: 20px;
  background: url("../images/model.jpg") center;
  background-size: contain;
  background-clip: content-box; /*클립 속성을 항상 아래쪽에 위치*/
  background-origin: border-box; /*기본값*/
}

background (속기형)

위에 속성들을 하나로 묶어서 사용

/* transparent는 기본값이기 때문에 안넣어도 상관X */
div {
  background: transparent url("../img/aa.svg") no-repeat 10px 40px fixed;
}