목차
- background 예제 - 배경색/배경이미지 설정
- background 정의
- background 구문
- background 예제 - div 요소의 배경 변경
- background 예제 - 웹문서 배경색 변경
- background 예제 - 웹문서 배경이미지 설정
- background 예제 - 배경이미지 반복 없이 설정
- background 에제 - 배경이미지 고정 설정
- background 예제 - 배경이미지 위치 변경
- background 예제 - 웹문서 background 속성값 반환
background 예제 - 배경색/배경이미지 설정
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.background = "Tomato url('hz.png') no-repeat right top";
}
</script>
결과보기
background 정의
아래 (배경색/배경이미지) 관련 속성 일괄 설정/반환. (※ 순서는 무관)
1.
되도록이면 개별 속성 이용 권장. (∵ 보다 직관적)
2.
- 기본값: transparent none repeat scroll 0% 0% auto padding-box border-box
- CSS버전: CSS1 + CSS3
3.
모든 브라우저 지원.
background 구문
[반환]
object.style.background
[설정]
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
[속성값]
[반환값]
배경 관련 문자열 반환.
background 예제 - div 요소의 배경 변경
<style>
#hz {
width: 300px;
height: 300px;
background: tomato url('https://i.imgur.com/PQNhCln.gif') no-repeat fixed center;
color: white;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.background = "url('https://i.imgur.com/PQNhCln.gif') lightblue repeat-x center";
}
</script>
결과보기
background 예제 - 웹문서 배경색 변경
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundColor = "red";
}
</script>
결과보기
background 예제 - 웹문서 배경이미지 설정
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundColor = "lightblue";
document.body.style.backgroundImage = "url('https://i.imgur.com/PQNhCln.gif')";
}
</script>
결과보기
background 예제 - 배경이미지 반복 없이 설정
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.background = "lightblue url('https://i.imgur.com/PQNhCln.gif') no-repeat";
}
</script>
결과보기
PS. 개별 속성 이용해 표현하면 더 직관적.
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundColor = "lightblue";
document.body.style.backgroundImage = "url('https://i.imgur.com/PQNhCln.gif')";
document.body.style.backgroundRepeat = "no-repeat";
}
</script>
결과보기
background 에제 - 배경이미지 고정 설정
[예제1] - CSS 배경이미지 고정시키려면, backgroundAttachment 사용.
※ 주의: background 속성 이용하면 배경이미지 사라짐.
<style>
body {
background: #f3f3f3 url('https://i.imgur.com/PQNhCln.gif') no-repeat right top;
height:1000px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundAttachment = "fixed";
}
</script>
결과보기
[예제2] - JS로 배경이미지 새로 설정할 땐, background 속성 이용 가능.
<style>
body {
height:1000px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.background = "#f3f3f3 url('https://i.imgur.com/PQNhCln.gif') no-repeat right top fixed";
}
</script>
결과보기
background 예제 - 배경이미지 위치 변경
<style>
body {
background-image: url('https://i.imgur.com/PQNhCln.gif');
background-repeat: no-repeat;
}
</style>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundPosition="top right";
}
</script>
결과보기
background 예제 - 웹문서 background 속성값 반환
<body style="background:#f3f3f3 url('https://i.imgur.com/PQNhCln.gif') no-repeat right top;">
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.body.style.background);
}
</script>
결과보기
PS. 결과값 (※ 주의: 선언된 스타일 순서 및 표현 방법이 다를 수 있음.)
url("https://i.imgur.com/PQNhCln.gif") right top no-repeat rgb(243, 243, 243))
