• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 정의

 

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



 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012