생활코딩 CSS_10.1 배경(background)

배경(background)

---

Element의 배경을 설정하는 기능

배경색 및 이미지

---

 

div {
    background-color: color; /*배경 색 변경*/
    background-image: url("\relative\path.png"); /*배경 이미지 변경*/
}

• 배경색과 이미지는 중첩해서 적용할 수 있다.
• 이미지에 투명한 부분이 있거나 태그 영역을 가득 채우지 않으면 배경색이 보인다.

배경 이미지 속성

---

배경 이미지를 변경할 수 있는 속성

 

div {
    background-image: url("\relative\path.png");
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: 150px 100px;
    background-position: left top;

    /*속성 축약형*/
    background: color image repeat attachment;
}

Background-repeat

• 배경 이미지의 반복 여부를 결정

속성값	의미
repeat	배경을 반복 (default)
no-repeat	배경을 반복하지 않음
repeat-x	배경을 x축 방향으로만 반복
repeat-y	배경을 y축 방향으로만 반복

Background-attachment

• 배경 이미지의 스크롤 여부를 결정

속성값	의미
fixed	배경이 움직이지 않음
scroll	배경이 element와 같이 움직임. element 내부에서 scroll하면 배경이미지는 스크롤 되지 않음
local	배경이 element와 같이 움직임. element 내부에서 scroll하면 배경이미지도 스크롤
initial	기본값
inherit	부모의 값을 상속받음

Background-size

• 배경 이미지의 크기를 결정

속성값	의미
auto	이미지 크기 유지
수치 입력	px로 절댓값을 입력하거나 %로 비율을 입력
값을 하나만 입력하면 width 크기로 지정이 되며 length는 원본이미지의 비율에 따라 결정된다.
cover	이미지가 화면 전체를 채우도록 크기 설정
contain	화면 내에 이미지 전체가 들어갈 수 있도록 크기 설정
initial	기본값
inherit	부모의 값을 상속받음

Background-position

• 배경 이미지의 위치를 지정

속성값	의미
방향 입력	해당 방향에 위치
수평방향: left right center
수직방향: top bottom center
수치 입력	px로 절댓값을 입력하거나 %로 비율을 입력
repeat-x	배경을 x축 방향으로만 반복
repeat-y	배경을 y축 방향으로만 반복

참고

---

• 생활코딩 CSS-배경(background)
• background 속성 by ofcourse

CSS by CODING FACTORY

• background-color
• background-image
• background-repeat
• background-attachment
• background-size
• background-position