생활코딩

Coding Everybody

코스 전체목록

닫기

background

Summary

각 개별 배경 속성들을 한번에 지정하는 약식 속성입니다.

[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
기본값각 개별 속성들 참고
적용대상모든요소
상속상속안됨
퍼센테이지background-position에만 허용
미디어Visual

 

Value

background-color

  • 색상값 : #f00, #ff0000, rgb (250, 0, 0), red등으로 표현
  • transparent [default 값]
  • inherit

background-image

  • <url> : 배경 이미지를 지정할 경로
  • none : 이미지가 사용되지 않음.
  • inherit

background-repeat

  • repeat [default값] : 배경 이미지가 수직과 수평으로 반복
  • repeat-x : 수평으로 만 반복
  • repeat-y : 수직으로 만 반복
  • no-repeat : 반복되지 않고, 이미지가 한번만 나타난다.
  • inherit

background-attachement

  • scroll [default값] : 배경이미지가 화면에 따라 스크롤
  • fixed : 배경 이미지를 화면에 고정
  • inherit

background-position [sample]

  • 백분율 | 백분율
    • 값이 '0% 0%': 배경이미지가 패딩을 포함한 컨텐츠 영역의 맨위 오른쪽부터 나타난다.
    • 값이 '100% 100%': 배경이미지가 패딩을 포함한 컨텐츠 영역의 맨아래 오른쪽에 나타난다. 
    • 값이 '20% 80%': 배경이미지의 오른쪽에서 20% 아래로 80%의 지점이 패딩을 포함한 컨텐츠 영역의 오른쪽으로 20% 아래로 80% 지점에서 나타난다.
  • 길이 | 길이
    • 값이 '2em 2em'이라면 배경 이미지의 맨위 왼쪽부터  패딩을 포함한 컨텐츠 영역의 맨위 왼쪽 모서리에서 오른쪽 2em, 아래쪽 2em에 나타난다.
  • [top or center or bottom] | [left or center or right] : center는 생략할수 있다. 즉 background-position: top center; 는 background-position: top;과 같다.
  • inherit

Tip

  1. 다음은 똑같은 속성값을 가지는 배경을 다르게 설정하는 방법입니다. [sample : 스크롤바를 움직여 보세요 ]
    .div1 {
        background: url("image.jpg") #666 50% repeat fixed;
    }
    .div2 {
        background-image: url("image.jpg");
        background-color: #666;
        background-position: 50%;
        background-repeat: repeat;
        background-attachment: fixed;
    }

 

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 시1연이
    배경 예제는 두 개 차이가 뭔가요?? 다른 게 없는디
  2. 푸른하늘
    11일차 공부 감사합니다
  3. 이주형
    감사합니다~!^_^
  4. 왕초보
    background-size 는 어떻게 사용 하는건가요?
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기