JavaScript로 배경 이미지의 위치 지정 영역 설정하기
JavaScript에서 배경 이미지의 위치 지정 영역(positioning area)을 설정하려면 backgroundOrigin 속성을 사용합니다. 이 속성은 배경 이미지가 요소의 어느 영역을 기준으로 배치될지 결정합니다.
backgroundOrigin 속성에 사용할 수 있는 값은 다음과 같습니다.
- border-box: 테두리(border)를 포함한 전체 영역을 기준으로 배경 이미지를 배치합니다.
- padding-box: 패딩(padding) 영역까지를 기준으로 배경 이미지를 배치합니다. (기본값)
- content-box: 실제 콘텐츠가 표시되는 영역만을 기준으로 배경 이미지를 배치합니다.
예제
아래 예제 코드를 실행하고 버튼을 클릭하면, 배경 이미지의 위치 지정 영역이 콘텐츠 박스(content-box) 기준으로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed yellow;
padding: 35px;
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.backgroundOrigin = "content-box";
}
</script>
</body>
</html>