> For the complete documentation index, see [llms.txt](https://leeboa.gitbook.io/study/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeboa.gitbook.io/study/undefined/image-background.md).

# Image Background

## Image Background

**배경화면 랜덤으로 불러오기**

```javascript
const body = document.querySelector("body"); // 바디지정
const IMG_NIMBER = 5; // 이미지 갯수 
 
function handleImgLoad(){
   console.log("finished loading");
}

function paintImage(imgNumber){
   const image = new Image(); // 이미지값을 받음
   image.src=`img/bg${imgNumber + 1 }.jpg`; // +1 을해주는이유는 0부터 시작하기때문에 이미지 1부터 시작하기 위해서이다.
   image.classList.add("bgImage") // image에 bgImage 클레스명 추가
   body.prepend(image); //prepend 맨앞으로 추가됨 
   image.addEventListener("loadend", handleImgLoad());
}

function genRandom(){
   const number = Math.floor(Math.random() * IMG_NIMBER); // 이미지명을 랜덤하게 불러옴
   return  number;

}

function init(){
 const randomNumber =  genRandom();
 paintImage(randomNumber) // 함수  paintImage 랜덤하게 이미지를 업로드해줌

}

init();
```

### Math.random()

![](/files/-M_dIh0lUxkTUpBAnqfO)

![](/files/-M_dIjqeCuEfcG_QRC36)

**랜덤한 숫자를 불러온다.** 

### Math.floor()

**3 이하의 소수점을 떨어트림** 

![](/files/-M_dJnbiWTeefX3Plb9S)

###

### Math.ceil()

![](/files/-M_dJqokEBQyYSivtF0s)

**반대로 올려주는 역활을 한다.**