![thumbnail](/static/d9ad675a8d2ae4ade6e5fa2890a43d4b/016f8/marten-bjork-rH8O0FHFpfw-unsplash.jpg)
background VS background-image
블로그를 만들면서 background로 지정한 부모 요소의 색상이 자식 요소에 background를 지정하면 사라진다는 것을 알게됐다. 아래 예시로 보자.
<div class="block">block1</div>
<div class="block bg-gradient1">block2</div>
<div class="block bg-gradient2">block3</div>
.block {
/ ... / /* 다른 속성 생략 */
background: #ee2560;
}
.bg-gradient1 {
background-image: linear-gradient(
110deg, rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%
);
}
.bg-gradient2 {
background: linear-gradient(
110deg, rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%
);
}
![](/abed818f053e6421c9a115bfc2edbfe3/221012_background-image.png)
background
속성으로 지정한 블록 요소 위에 그라데이션을 적용하고 싶었다. 그러나 background
로 linear-gradient 값을 준 결과와 background-image
로 값을 준 결과가 다르게 나타난다. 후자의 경우, 처음에 지정했던 배경 색상이 증발해버렸다.
background 특징
위 예시의 결과의 원인은 바로 background
속성이 가지고 있는 특징 때문이다. background
는 약식 속성으로 배경과 관련된 여러 속성 값을 한번에 설정할 수 있다는 장점이 있다. 그러나 이전에 설정한 값을 덮어버린다는 특징도 존재한다.
자주 헷갈리는 background
와 background-color
에 대해서도 같은 원리가 적용된다.
p {
background-color: red;
background: url(images/bg.gif) no-repeat;
}
위 코드를 보면, background
속성 값을 지정할 때 배경 색상은 정하지 않았다. 참고로 background
속성이 지정하지 않은 값은 초기값으로 설정된다. 그렇다면 background
의 지정되지 않은 값 즉, 투명한 배경이 초기값이 되고 이전 속성을 덮어버린다고 했으므로 결과는 배경색이 없는 상태가 된다.
결론
이전 선언 값을 전체적으로 변경하고 싶을 때는 background
를 사용하고 각각 다른 요소에 특정 값을 주고 싶다면 background-image
나 background-color
등 개별 속성을 사용하자.
References
MDN Web Docs
techstacker