HTML ホームページに画像が表示されない

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

githubを使ってホームページの作成を試みました。

画像のURLは一度PC本体に保存した画像をGoogle Driveにアップロードして取得しました。
（https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474←こちらのサイトを参考にさせていただきました。）

PC(Macbook Air ver.10.14.6)のchromeではヘッダーの画像と背景の画像の両方が正常に表示されましたが、PCのsafari、iPhone(XR ver.13.3.1)のsafari, chromeのブラウザでは２枚とも表示されませんでした。

因みにPCのsafariでは画像が表示されるべき場所に四角形の中に？が入ったマークが、iPhoneのsafari,chromeでは四角形のマークが表示されました。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <title></title>
8  </head>
9  <body>
10    <div class="header">
11      <div class="header_logo">xxx</div>
12      <div class="header_list">
13        <ul>
14          <li>xxx</li>
15          <li>xxx</li>
16          <li>xxx</li>
17        </ul>
18
19      </div>
20      <div class="header_image">
21        <img src="https://drive.google.com/uc?id=xxxxxx">
22      </div>
23
24
25    </div>
26  </body>
27</html>

css
1body {
2  background-image: url('https://drive.google.com/uc?id=xxxxxx');
3  font-family: "Hiragino Mincho Pro"
4  font-size: 20px;
5}
6
7.header_logo {
8  padding: 10px 30px;
9  float:left;
10}
11
12.header_image img {
13  text-align:center;
14  padding-top: 20px
15}
16
17.header_list li{
18  padding: 10px 30px;
19  list-style: none;
20  float: left;
21}