css background

background란

• 이름 그대로 배경을 설정에 관한 태그이다.
• background-color, background-image, background-repeat, background-position, background-attachment 등 속성을 활용해서 배경효과를 줄 수 있다.

background-color: 배경색

div{background-color: aqua;} 

background-image: 배경에 이미지 삽입

div{background-image: url(../img/iclogo.png);} 

• 별다른 값을 입력 안하면 이미지 x, y 반복해서 삽입
• background-repeat 값으로 설정 가능
  

background-repeat: 배경 이미지의 반복 설정

div{background-repeat: repeat-x;} 
div{background-repeat: repeat-y;} 
div{background-repeat: no-repeat;} 

• repeat-x: 이미지 반복 x축만
  

• repeat-y: 이미지 반복 y축만
  

• no-repeat: 이미지 반복 x
  

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

div{background-position: center top;}
div{background-position: left center;}
div{background-position: center center;}
div{background-position: right 20px top 50px;}
div{background-position: right top;}

background-attachment: 배경 이미지 위치 고정/스크롤

div{background-attachment: fixed;}
div{background-attachment: scroll;}

• fixed: 스크롤시 이미지 안보이고 그자리 그대로 고정
• scroll: 스크롤시 이미지가 따라옴

다중 입력

div{background: aqua url(../img/iclogo.png) no-repeat right 20px top 50px;}

• 각각 줄 수도 있지만 background에 한 번에 입력이 가능하다.
• 순서: color, image, repeat, position