[DOM_Style] JS - background 속성 ★ - (배경색/배경이미지) 설정/반환 (= background속성 / 백그라운드속성)

1. background 예제 - 배경색/배경이미지 설정
2. background 정의
3. background 구문
4. background 예제 - div 요소의 배경 변경
5. background 예제 - 웹문서 배경색 변경
6. background 예제 - 웹문서 배경이미지 설정
7. background 예제 - 배경이미지 반복 없이 설정
8. background 에제 - 배경이미지 고정 설정
9. background 예제 - 배경이미지 위치 변경
10. background 예제 - 웹문서 background 속성값 반환

background 예제 - 배경색/배경이미지 설정

 

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.body.style.background = "Tomato url('hz.png') no-repeat right top";

}

</script>

 

결과보기

background 정의

 

아래 (배경색/배경이미지) 관련 속성 일괄 설정/반환. (※ 순서는 무관)

• background-color - 배경색
• background-image - 배경이미지
• background-repeat - 배경이미지 반복
• background-attachment - 배경이미지 고정
• background-position - 배경이미지 위치
• background-size - 배경이미지 크기
• background-origin - 배경이미지 좌표 시작점
• background-clip - 배경 영역

---

 

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"

 

---

[속성값]

 

• 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))