background 속성은 요소와 관련된 배경 이미지를 설정하거나 가져오는 데 사용됩니다. 약식 속성이며 최대 8개의 속성을 조작할 수 있습니다.
구문
다음은 −
의 구문입니다.배경 속성 설정 -
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
값
다음은 값입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 색상 요소 배경색을 설정합니다. |
| 2 | 이미지 요소 배경 이미지를 설정합니다. |
| 3 | 반복 배경 이미지가 반복되는 방식을 설정합니다. |
| 4 | 첨부 파일 배경 이미지를 고정 또는 페이지 스크롤로 설정합니다. |
| 5 | 위치 배경 이미지 시작 위치를 설정합니다. |
| 6 | 크기 배경 이미지 크기를 설정합니다. |
| 7 | 원점 배경 위치 지정 영역을 지정합니다. |
| 8 | 클립 배경 이미지가 칠해지는 거리를 설정합니다. |
예시
background 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE BACKGROUND 이미지를 클릭하면 -
