[CSS]background-image 안나올때

"background-image 맞게 쓴거 같은데 왜 안나오는 거지?" 

background 이미지를 넣을때 분명 제대로 넣은 것 같은데 안나올  때가 가끔 있습니다. 그럴때 확인해 볼 만것 들에 대해 적어보려고 합니다!

 

체크해보자!

안되는 경우의 수가 여러 있겠지만 이런 경우 안되지 않을까 싶습니다. 

1. 배경이미지가 들어갈 공간에 높이가 설정되어있는지?

2. 배경이미지의 경로를 제대로 설정했는지? 

3. 단축 속성과 혼용하지 않았는지? 

---

1. 배경이미지가 들어갈 공간에 높이가 설정되어있는지?

박스 안에 이미지를 나오게 할때, 이미지로 나올 것인지 배경이미지로 넣을 것인지에 따라 크기를 인지 하는지 차이가 있습니다. 배경이미지로 넣을때는 박스의 가로값, 세로값을 설정해줘야 합니다. 또는 가로 세로 값이 있는 자식태그가 있어야 합니다. 

html

<div class="box01"><div>

css

.box01{
 width:300px;
 height:300px;
 background-image:url('이미지경로');
}

2. 배경이미지의 경로를 제대로 설정했는지? 

이미지 경로가 파일의 위치가 맞는지, url주소가 제대로 되었는지, 확장자는 잘썼는지 확인해봅니다. 오타 나지 않게 복붙하기!

 

3. 단축 속성과 혼용하지 않았는지? 

'background' 단축 속성은 배경에 대한 속성을 한번에 쓸 수 있습니다.

ex) background: url('이미지경로') no-repeat center center; 

혹시 이런식으로 'background-image'에 다는 속성까지 적지 않았는지 확인해봅니다. 

.box01{
 width:300px;
 height:300px;
 background-image: url('이미지경로') no-repeat center center;
 // 잘못된 css
}

 

*열심히 적었지만 문제 있거나, 궁금한 점은 댓글달아주세용.

 

2020/06/30 - [퍼블리싱/HTML&CSS] - [CSS]배경이미지에만 OPACITY 적용(multiple효과)

[CSS]배경이미지에만 OPACITY 적용(multiple효과)