html css 배경

김정훈·2024년 3월 26일

html

목록 보기
7/13

배경

1. background-image

배경이미지 설정

  • url(이미지경로) :
    bckground-image : url('images/logo.png');

2. background-repeat

  • repeat-x : 좌 -> 우 반복
  • repeat-y : 위 -> 아래 반복
  • no-repeat : 반복없음

3. background-size

  • auto : 이미지 원본 그대로 출력
  • contain : 이미지를 영역 안으로 축소/확대
  • cover : 이미지를 영역 안으로 채우기
  • 크기값 : background-size : 너비 높이
    너비 하나만 설정하면 높이는 자동계산
  • 백분율 : background-size : 50%

4. background-position

배경 이미지 배치

  • background-position: <수평 위치> <수직 위치>;
    수평 : left-왼쪽, right-오른쪽, center-중앙
    수직 : top-위, bottom-아래, center-중앙

5. background-origin

이미지 배치 기준

  • border-box : 경계선 부터 배치 - 기본값
  • padding-box : 내부 여백 부터 배치
  • content-box : 내용 영역 부터 배치

6. background-attachment

  • scroll : 배경 이미지도 스크롤(기본값)
  • fixed : 배경 이미지 고정

7. background

속성 하나로 배경 이미지 제어하기

  • background : 색상 이미지(url..) 반복(repeat) attachment position
    색상, 이미지 -> 둘중 하나는 필수
profile
안녕하세요!

0개의 댓글