background-imageの適用方法がわからない

前提・実現したいこと

参考書　いちばんやさしいHTML5&CSSの教本　人気講師が教える本格webサイトの書き方のLesson39ボーダーと背景でメインコンテンツの見出しを装飾する、をやっているのですが
background-imageをつける練習中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

CSSで
.main h1{
background-image:url(bloom/BACKGROUND/images/TEST.jpg);
と入力する
↓
検証を開くとFailed to load resource: net::ERR_FILE_NOT_FOUND　　TEST.jpg

エラーメッセージ
検証を開くとFailed to load resource: net::ERR_FILE_NOT_FOUND　　TEST.jpg
と表示され装飾ができません

該当のソースコード

.main h1{
background-image:url(bloom/BACKGROUND/images/TEST.jpg);

ソースコード
HTML
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<html>
<header>
    <link rel="stylesheet" href="CSS/style2.css">
    <div class="main">
        <h1>test</h1>
    </div>
</header>

</html>

CSS
.main h1{
    background-image:url(bloom/BACKGROUND/images/TEST.jpg);

### 試したこと

ここに問題に対して試したことを記載してください。
ファイルのパスを変更したりファイルの位置を見直したりしましたがわかりません、
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
Brackets