background-positionについて

実現したいこと

ローディングアニメーションで画像を指定した位置に表示させたい。

前提

WordPress・Elementorを使用してサイトを作成しています。
テーマは「Hello Elementor」で、子テーマのstyle.cssにローディングアニメーションを追加しています。

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

垂直方向は指定通りの位置に表示されるのですが、水平方向が反映されません。
素人なのでどこを書き間違えているのかわかりません。

該当のソースコード

/* 画面全体の設定 */ #loader_wrap { z-index: 999; position: fixed; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; top: 0; background: #ffffff; pointer-events: none; transition: all 0.3s; } /* ローディングアニメーションの設定 */ .loader { width: 12%; height: 100vh; background: url("") #ffffff; background-repeat: no-repeat; background-size: contain; opacity: 0; animation: blinkAnime 6s infinite linear; } @keyframes blinkAnime { 0% {opacity: 0;} 50% {opacity: 1; } 100% {opacity: 1; } } /*スマホ縦*/ @media (orientation: portrait) and (max-width:480px) { .loader { background-position: 55% 45%; width: 30%; } } /*TB縦*/ @media (orientation: portrait) and (max-width:1024px) and (min-width:481px){ .loader { background-position: 55% 45%; width: 20%; } } /*TB横*/ @media (orientation: landscape) and (max-width:1180px) { .loader { background-position: 55% 50%; width: 20%; } } /*PC*/ @media screen and (min-width:768px) { .loader { background-position : 55% 50%; width: 15%; } }

試したこと

キャッシュのクリア