css4

배경 색과 배경 이미지

  • 1background-color 속성
    웹 문서의 요소에 배경색을 지정
    배경색은 상속되지 않는다.
  • 1background-clip 속성
    배경을 어디까지 적용할 지 결정, 박스 모델 기준
    border-padding-content box
  • 2background-image 속성
    배경 이미지 지정하기, 배경 이미지 파일 경로 지정
    <style>
    body{background-image: url('image/bg1.png');}
    </style>
  • 3background-repeat 속성
    배경 이미지 반복 여부 및 반복 방향 지정
    *repeat-x: 가로로 반복
    *repeat-y: 세로로 반복
    *no-repeat: 반복 X
  • 1background-size 속성
    auto: 자동 contain: 요소 안에 배경 이미지 다 들어오도록 홛개/축소
    cover: 배경 이미지로 모두 덮도록 확대/축소
    <크기 값>: 원래 배경 이미지 킈를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값 지정
     <백분율>:원래 배경 이미지 크기를 기준으로 확대/축소
  • 2background-position 속성
    배경이미지를 반복하지 않을 경우, 배경이미지를 표시할 위치 지정
    left-top, center..
  • 3background-attachment 속성
    배경이미지를 고정하는 속성
    scroll, fixed
  • 4background 속성
    배경 관련 속성 줄여서 표기, 표시 순서 상관 없음