自作テーマでCSSの背景画像が表示されない

　CSSの背景画像について質問です。独自テーマを使用していますが，CSSの背景画像について書籍やネット記事などを参考にしてトップページのみに表示させようとしました。普通に「front-page.php」のdiv要素にid属性を追加し，それに対して style.css で「background-image」属性を使って相対パスで背景画像を指定しました。
　ファイル構造は，テーマの style.css ファイルと同階層に画像ファイルのフォルダー「images-content」があり，そこにサブフォルダー「logo-animate」の中に「logo-animation.gif」ファイルが保存されています。
　WordPress 5.x対応の解説書『WordPressデザインレシピ集』（https://gihyo.jp/book/2019/978-4-297-10778-9）を参考にしました。Webブラウザー（Microsoft Edge）の開発者ツールの「スタイル」タブで該当div要素に適用されているCSSを確認すると，style.css で相対パスで指定したアドレスが「https://(ドメイン名)/images-content/logo-animate/logo-animation.gif」と表示されていました。これはWordPress側の仕様変更なのでしょうか?
　うまくCSSの背景画像を表示できないので，解決策をご存知の方はご返信いただければと思います。よろしくお願いします。

コード

front-page.php

<?php get_header(); ?>
	<div id="hero-gif"></div>
	<div class="maincol">
		<div class="maincol-container">
			<?php if( have_posts() ): while( have_posts() ) : the_post(); ?>
			<?php the_content(); ?>

		</div>
	</div>
	<?php endwhile; else: ?>
	
	<?php endif; ?>
<?php get_footer(); ?>
</main>

style.css（抜粋）

/* フロントページのアニメーションGIF */
#hero-gif {
	width: 500px;
	height: 500px;
	background-image: url(/images-content/logo-animate/logo-animation.gif) !important;
}

※Webページ（https://kinsta.com/jp/blog/wordpress-background-image/#wordpress-4）を参考にfunctions.phpにもコードを追記しましたが表示されません。