[HTML/CSS] background 이미지 넣기

background-image: url('이미지 주소'); 로 이미지를 넣는다.

 

background-repeat : 배경 이미지 패턴

• repeat : 가로  세로 반복적으로 배열, 기본값
• repeat-x : 이미지가 가로로만 반복
• repeat-y : 이미지가 세로로만 반복
• no-repeat : 이미지가 반복 배열되니 않는다.

 

background-size 속성 : 배경이미지 크기 지정

• auto : 기본값으로 배경 이미지 원래의 폭과 너비 그대로 표시한다.
• cover : 배경지역이 배경이미지로 완전히 덮이도록 이미지를 최대한 크게해서 표시한다.
  따라서 이미지의 일부분이 안보일 수 있다.
• contain : 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다.
• inital : 기본값으로 초기화한다
• 길이 : px, cm 등의 단위로 배경 이미지의 폭과 너비를 조정한다.
  첫번째 값은 폭, 두번째 값은 너비
  한가지 값만 넣을경우 나머지는 auto설정으로 표시된다.
• % : 부모요소에 비례한 %값으로 지정
  한가지 값만 넣을경우 나머지는 auto설정으로 표시된다.

반응형

background-size: cover --> 이미지가 페이지에 꽉 차게 해준다.

See the Pen background-size by 정혜선 (@Diligent-milk) on CodePen.

 

background-position : 배경이미지 위치 지정

• left top : 왼쪽 상단
• left centor : 왼쪽 중앙
• left bottom : 왼쪽 맨아래
• right top : 오른쪽 상단
• right centor : 오른쪽 중앙
• right bottom : 오른쪽 맨아래
• center top : 가운데 상단
• center center : 정 가운데
• center bottom : 가운데 맨아래

 

background-position: top --> 이미지가 위쪽 상단에 위치하게 함

See the Pen background-position by 정혜선 (@Diligent-milk) on CodePen.

 

background-attachment : 배경이미지 고정

• scroll : 이미지가 요소에 상대적인 위치, 기본값
• fixed : 이미지가 윈도우 창에 상대적인 위치 (스크롤 바를 내려도 위치가 그대로)
• local : 스크롤 할 때 요소의 내용에 상대적인 위치