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

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-M_dGPHLAkpHV_57GYQf%2F-M_dIh0lUxkTUpBAnqfO%2Fimage.png?alt=media\&token=0cfb3f1f-5e37-406b-950e-39d75a381930)

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-M_dGPHLAkpHV_57GYQf%2F-M_dIjqeCuEfcG_QRC36%2Fimage.png?alt=media\&token=ebe97e30-2dc8-484d-a423-654b35600eaf)

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

### Math.floor()

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

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-M_dGPHLAkpHV_57GYQf%2F-M_dJnbiWTeefX3Plb9S%2Fimage.png?alt=media\&token=a76f3102-eb61-4f1f-8249-0b35cd640641)

###

### Math.ceil()

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-M_dGPHLAkpHV_57GYQf%2F-M_dJqokEBQyYSivtF0s%2Fimage.png?alt=media\&token=6976d7d8-ed05-49cc-bdca-53a824cda5f3)

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