JavaScript에서 배경 이미지의 크기를 설정하려면 backgroundSize 속성을 사용하면 됩니다. 이 속성은 CSS의 background-size 스타일 속성에 대응하며, 요소의 style 객체를 통해 간단하게 배경 이미지의 너비와 높이를 지정할 수 있습니다.
backgroundSize 속성이란?
element.style.backgroundSize는 DOM 요소의 인라인 스타일로 배경 이미지 크기를 동적으로 변경할 때 사용합니다. 값은 픽셀(px), 퍼센트(%), 그리고 cover, contain 같은 키워드를 사용할 수 있습니다.
- 픽셀 단위: 예를 들어 "150px 200px"처럼 가로와 세로 크기를 순서대로 지정합니다.
- 퍼센트 단위: 부모 요소 크기 기준으로 상대적인 크기를 설정합니다.
- cover / contain: 이미지가 영역을 꽉 채우거나(cover) 영역 안에 모두 들어가도록(contain) 자동 조절됩니다.
예제 코드
아래 예제는 버튼을 클릭하면 div 박스의 배경 이미지 크기가 150px × 200px로 변경되는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 600px;
height: 400px;
background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
}
</style>
</head>
<body>
<button onclick="display()">배경 이미지 크기 설정</button>
<div id="box">
</div>
<script>
function display() {
document.getElementById("box").style.backgroundSize = "150px 200px";
}
</script>
</body>
</html>코드 설명
- CSS 스타일 정의:
#box - 버튼 클릭 이벤트: 버튼에
onclick="display()"를 연결해 클릭 시 함수가 호출되도록 합니다. - 크기 변경 로직:
display()함수 내부에서document.getElementById("box").style.backgroundSize에 "150px 200px" 값을 할당하여 배경 이미지의 크기를 즉시 변경합니다.
참고 사항
배경 이미지 크기를 반응형으로 처리하고 싶다면 다음과 같이 활용할 수 있습니다.
// 영역을 꽉 채우도록 설정
document.getElementById("box").style.backgroundSize = "cover";
// 이미지 전체가 보이도록 설정
document.getElementById("box").style.backgroundSize = "contain";
// 부모 요소 대비 50% 크기로 설정
document.getElementById("box").style.backgroundSize = "50% auto";이처럼 JavaScript의 backgroundSize 속성을 사용하면 사용자 인터랙션에 따라 배경 이미지 크기를 유연하게 제어할 수 있습니다.