web_frontend(23)CSS 배경

배경

 

background-color (요소의 배경색상)

 

transparent : 투명함 (기본값)

색상 : 지정 가능한 색상으로 배경을 지정 ex) black, #000000

 

 

 

backfround-image (요소의 배경 이미지 삽입)

 

none : 이미지 없음

url("경로")  : 이미지 경로 

되도록 "" 붙이는걸 추천

 

 

 

background-repeat (요소의 배경 이미지 반복)

 

repeat : 이미지를 수직, 수평 반복

repeat-x : 이미지를 수평 반복

repeat-x : 이미지를 수직 반복
no-repeat : 반복 없음

 

 

 

background-position (요소의 배경 이미지 위치)

0% 0%: 0% ~100% 사이 값  -> 순서대로 x축 y축 값이다.  

방향 : top, bottom, left, right, center

단위 : px, em, rem 등 단위로 지정

 

0% 0% 는 왼쪽 상단

100% 100%는 우측 하단 

x축 y축 순서인것을 명심

 

방향으로 지정하면 순서를 바꿔도 똑같이 됨

 

background-size (요소의 배경 이미지 크기)

 

auto: 이미지의 실제 크기 (기본값)

단위 : px. em, rem 등 단위로 지정

-> backfround-size: 100px 200px; 이런식으로 가능하지만 비율에 맞게 계산해서 고쳐줘야해서 귀찮음 그래서 두개를 입력하는 것보다 하나만 입력하는게 더 편함  backfround-size: 100px; 요렇게 이러면 더 편함 ground-color

 

 

cover : 비율을 유지, 요소의  더 넓은 너비에 맞춤

contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

 

background-attachment (요소의 배경 이미지 스크롤 특성)

 

scroll : 이미지가 요소를 따라서 같이 스크롤

fixed : 이미지가 뷰포트에 고정, 스크롤 x

local : 요소 내 스크롤 시 이미지가 같이 스크롤