생활코딩

Coding Everybody

코스 전체목록

닫기

background-position

Summary

특정 글꼴이나 대표 글꼴을 지정한다.

[ [<백분율> | <길이> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
기본값 0% 0%
적용대상 블럭레벨 요소
상속 상속안됨
퍼센테이지 박스의 크기를 참조
미디어 Visual

Value

  • 백분율 | 백분율
    • 값이 '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;과 같습니다.

Tip

  1. 다음과 같이 사용할 수 있습니다.
    body {
        background-position: top left;    
    }

Sample

댓글

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

댓글 본문
  1. 푸른하늘
    11일차 공부 감사합니다
  2. 이미지
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
    이쪽에 있는 이미지가 다 깨져보입니다 !!!!!!!!!
  3. 이미지가 깨젔어요
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기