[css] 백그라운드 이미지 적용하기 (background-image 속성)

#background-image

배경 이미지를 넣을때 사용하는 속성
기본적으로 바둑판 형식으로 사진이 채워진다.

background-image: url('[사진경로]')  : 배경화면에 사용할 사진의 경로를 입력한다. 

 - 웹에서 사용할 사진의 주소를 복사후에 넣어도 되고, 로컬PC에 존재하는 사진의 경로를 넣어도 된다.

div{
	/*웹 상에 존재하는 이미지 주소*/
  	background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtUMbYGuLdO0HJhrDidBrr4EetIrBj5e-otw&usqp=CAU');
}

배경이미지 기본값

 

---

background-repeat 
  : no-repeat   -> 기본 바둑판 형식의 사진을 딱 한장만 배경에 넣는다.
  : repeat-x     -> 바둑판이 더 심해진다(사진의 밀도가 더 높아짐)

background-position 
  -> 사진의 위치 설정  ( center,left,right,bottom,top 등이 있다.)

 

아래와 같이 설정

div#div2{
/*repeat*/
  background-repeat: no-repeat 
  background-repeat: repeat-x 
/*position*/
  background-position: center;
}

no-repeat + center 

---

repeat-y

 

---

background-attachment ( 배경이미지의 스크롤 여부)
  : fixed    -> 스크롤 할 때 사진의 위치가 고정되어 있음 
  : scroll    -> 스크롤하면 같이 따라다님(기본값)

---

#이미지에 filter로 효과 넣기

filter:invert(n%) : 사진의 색 반전
filter:blur(px)    :  사진 블러효과 

div#div4{
  filter: invert(100%);
}
div#div5{
  filter: blur(1.5px);
}

invert

---

blur