목차
backgroundImage 예제 - 웹문서의 배경이미지 설정 backgroundImage 정의 backgroundImage 구문 backgroundImage 예제 - div 요소의 배경이미지 설정 backgroundImage 예제 - div 요소의 배경이미지 반환 backgroundImage 예제 - 웹문서의 배경이미지 반환
backgroundImage 예제 - 웹문서의 배경이미지 설정
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundColor = "Tomato";
document.body.style.backgroundImage = "url('https://i.imgur.com/PQNhCln.gif')";
}
</script>
결과보기
backgroundImage 정의
배경이미지 설정/반환.
1.
CSS background-image 속성 참고.
2.
background-image 미적용 대비해, background-color 속성도 적용 필요.
3.
기본값: none
CSS버전: CSS1
4.
모든 브라우저 지원.
backgroundImage 구문
배경이미지 반환
object .style.backgroundImage
배경이미지 설정
object .style.backgroundImage = "url('URL')|none|initial|inherit"
[속성값]
CSS background-image 속성 참고.
[반환값]
배경이미지 속성값을 나타내는 문자열.
※ 주의: 인라인스타일로 정의된 경우에만 반환.
backgroundImage 예제 - div 요소의 배경이미지 설정
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.backgroundImage = "url('https://i.imgur.com/PQNhCln.gif')";
}
</script>
결과보기
backgroundImage 예제 - div 요소의 배경이미지 반환
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
<div id="hz" style="background-image:url('https://i.imgur.com/PQNhCln.gif')">홈짱닷컴 Homzzang.com</div>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.backgroundImage);
}
</script>
backgroundImage 예제 - 웹문서의 배경이미지 반환
<body style="background:red url('https://i.imgur.com/PQNhCln.gif');">
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.body.style.backgroundImage);
}
</script>
</body>
결과보기
