css - 배경(background-color,background-image,background-repeat,background-position)

background-color: 요소의 배경 색상 지정 (기본: 투명, 색상:지정가능한 색상으로 설정)

background-image: 요소의 배경 삽입(기본:none,ulr('경로')지정가능)

div{
  background-color: orange;
  height:300px;
  width:300px;
  background-image:url('https://i.namu.wiki/i/r1p0Hcj114_mWM3dnODq2RxaLqIuQU0YLJtWjOHIUgR5rAi-r0-vylnm6dTDHRrzXI88KAp2vcF8_hH17sfW9g.webp')
}

-> image를 설정했지만 div태그의 설정 크기보다 커서 화면에 제대로 출력되지않음

 

background-size: 배경사이즈 설정

-> background-size를 지정하니 repeat(반복)된것을 확인 할 수 있음

 

background-repeat:

• repeat: 이미지 수직,수평으로 반복
• repeat-x : 이미지 수평 반복(가로)
• repeat-y: 이미지 수직반복(세로)
• no-repeat:반복없음

-> 반복이 사라진것을 확인 할 수 있다

 

background-position:요소의 배경위치

방향: top,bottom, left, right, center로 지정가능

-> center로 맞춘후 사이즈를 300px로 지정

 

div{
  background-color: orange;
  height:300px;
  width:300px;
  background-size:300px;
  background-image:url('https://i.namu.wiki/i/r1p0Hcj114_mWM3dnODq2RxaLqIuQU0YLJtWjOHIUgR5rAi-r0-vylnm6dTDHRrzXI88KAp2vcF8_hH17sfW9g.webp');
    background-repeat:no-repeat;
  background-position:center;
}