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

# Image Background

4\. 이미지 백그라운드 넣기 : Unsplash API에서 랜덤으로 이미지를 불러와서 출력

{% embed url="<https://unsplash.com/>" %}

{% tabs %}
{% tab title="index.html" %}

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Something</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="js-clock">
        <h1 class="js-title">00:00</h1>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
    <form class="js-toDoForm">
        <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList">
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
    <script src="todo.js"></script>
    <script src="bg.js"></script>
</body>
</html>
```

{% endtab %}

{% tab title="index.css" %}

```css
body {
  background-color: #2c3e50;
  color: #34495e;
}

.btn {
  cursor: pointer;
}

.clicked {
  color: #7f8c8d;
}

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: fadeIn 0.5s linear;
}
```

{% endtab %}

{% tab title="bg.js" %}

```javascript
const body = document.querySelector("body");

const IMG_NUMBER = 6;

function paintImage(imgNumber){
    const image = new Image();
    image.src = `images/${imgNumber + 1}.jpg`;
    image.classList.add("bgImage");
    body.prepend(image);
}

function genRandom(){
    const number = Math.floor(Math.random() * IMG_NUMBER);
    return number;
}

function init(){
    const randomNumber = genRandom();
    paintImage(randomNumber);
}

init();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**math** : 수학에서 자주 사용하는 **상수와 함수**들을 **미리 구현**해 놓은 자바스크립트 표준 **내장 객체**

* **math.ceil :** 소수점을 올림
* **math.floor** : 소수점을 내림
  {% endhint %}