[CSS] background에 image 넣기, 배경 안 나올 때, 경로 확인하기

background 속성에 image를 넣었는데, 

F5를 아무리 눌러봐도 이미지가 나오지 않았다. 

이유가 뭘까?

 

이미지를 넣는 경로는 2가지가 있다. 

- 절대경로 다른 서버에 있는 이미지를 불러오는 경로

a {background: url("http://image.co.kr");}

- 상대경로 상대적으로 변경이 가능한 경로

폴더구조에서 현재 파일을 기준으로 상위 또는 하위 폴더 경로를 찾아서 url을 작성하는 방법이다. 

a {background: url(../images/main.png) no-repeat;}

 

 

작성했던 코드는

footer {background: url("images/이미지.jpg") center no-repeat;}

 

보통 하는 실수로 이미지 영역의 크기를 지정해주지 않는 것이 있는데, 

이미 지정한 것까지 확인을 한 상태였다. 

그렇다면 당연하게 여겼던 경로를 다시 살펴본다. 

 

확인해보니 images폴더가 html폴더 안에 있었기 때문에

상위폴더의 경로까지 지정해야 했다. 

footer {background: url("../images/이미지.jpg") center no-repeat;}

다시 F5를 눌러보면 사라졌던 이미지가 나타난 걸 볼 수 있을 것이다.