웹 페이지에 배경을 설정하는 방법을 알아보자
위와 같은 코드를 실행시키면 각 태그의 영역에 지정한 배경색이 칠해지게 된다.
화면 전체에 배경을 설정하고 싶으면 body부분에 설정해야 함을 알 수 있다.
특정 이미지를 배경으로 설정한 것이다
background-repaet 은 이미지가 화면보다 작을시 반복시킬지 정하는 것이다.
background-repaet: repaet | no-repeat | repeat-x | repeat-y 등이 있다
repeat : 전체 반복
no-repeat : 반복하지 않는다
repeat-x: x축만 반복한다
repeat-y: y축만 반복한다.
background-position: center;
는 이미지를 배치할 위치를 정할 수 있다.
center | left | right | top | bottom 등을 지정할 수 있다.
background-size: cover;
을 이용해서 이미지 크기를 조절할 수도 있다.
px를 직접 지정할 수 도 있으며 contain과 cover을 사용 할 수도 있다
contain : 배경을 사용하는 요소를 벗어나지 않는 최대크기로 이미지를 확대 또는 축소한다 비율유지.
cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소하며 가로 세로 비율을 유지함