background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수

문제점

 

오늘 아래처럼 background-image를 추가하던 중,

.select-btn {
 background-image: url(images/Polygon\ 1.png);
}

 

 

 

드롭다운 박스를 만들면서, 아래화살표 이미지를 추가하기 위해 아래와 같이 속성에 no-repeat;를 추가하였다.

.select-btn {
 background-image: url(images/Polygon\ 1.png) no-repeat;
}

그랬더니 아래와 같이 이미지가 아예 사라져버렸네~ 내 화살표 어디갔니

 

개발자도구를 살펴보니 오류가 난 것을 알 수 있다.

 

---

해결

 

그리고 답은 의외로 간단하고 어이없었는데... stack over flow에서 찾을 수 있었다.

https://stackoverflow.com/questions/11109013/background-imageno-repeat-not-working-syntax-is-correct

background에는 무수히 많은 가지속성들이 있고, backgrond-image는 그 중 하나로 오로지 '이미지를 무엇으로 할건지' 만을 지정해주는 속성이다.

 

이런 속성들이 있다!

즉 repeat을 지정해주는 속성은 background-repeat 속성을 골라서 no-repeat값을 넣어주어야 한다.

 

.select-btn {
 background-image: url(images/Polygon\ 1.png);
 background-repeat: no-repeat;
}

제대로 적용되었다!

 마찬가지로 여기서 위치를 조절해줄 때는 background-position속성을 사용해줘야 한다.

 

.select-btn {
 background-image: url(images/Polygon\ 1.png);
 background-repeat: no-repeat;
 background-position: 90% center;
}

짠!

 

 

 

---

추가

 

우리는 short-hand syntax를 사랑해야한다! 이걸 습관으로 들임으로써 적게는 몇줄부터 많게는 수백줄까지 코드를 절약할 수 있기 때문! 

이 모든 속성을 한번에 줄 수 있는 속성은 background이다.

 

.select-btn {
 background: url(images/Polygon\ 1.png) no-repeat 90% center;
}

 

이 shorthand의 속성들간의 순서는 아래와 같이 배치된다.

출처:(W3C) https://www.w3schools.com/css/css_background_shorthand.asp

하나의 속성값이 없다고 해도, 나머지 값이 맞는 순서로 배치되어있다면 상관 없다고 나와있다.

위의 코드를 예시로 보면 background-color가 없고 image의 url부터 나왔지만 문제없는 것을 확인할 수 있다!