background-image を background-position でレイアウトする際の % の計算方法が分からない。

container に background: で背景画像を敷き、以下の画像のように、左側のピンクの箱から少しずれた位置に画像を置くレイアウトを作成したいと思っています。背景画像の位置を background-position: で絶対値のPXで指定すると上手くいくのですが、calc()を使用して、% で指定しようとすると、計算が上手く行かずに困っています。

具体的にいうと、セクションの一番左側から479px、一番上から93px間隔をあけたいので、

css
1background-position: 479px 93px;

としていますが、横幅の最大値が1280px、縦幅の最大値が977pxのため、

css
1background-position: calc( 479 / 1280 * 100%) calc( 93 / 977 * 100%)

とすると、なぜか場所がずれてしまいます。

ちなみに現在記載しているコードは、こちらです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12  <section class="a">
13    <div class="container">
14      <div class="one">
15        <h2>aaa</h2>
16      </div>
17    </div>
18  </section>
19
20</body>
21</html>

css
1body {
2  margin: 0;
3  padding: 0;
4}
5
6.a .container {
7  max-width: 1004px;
8  margin: 0 auto;
9  padding-left: calc( 138 / 1280 * 100% );
10  padding-right: calc( 138 / 1280 * 100% );
11  padding-bottom: min(calc( 428 / 1280 * 100% ), 428px);
12  background: url(../img/sample.jpg) no-repeat;
13  background-position: 479px 93px;
14  background-size: min(calc( 663 / 1280 * 100% ),663px) min(calc( 884 / 977 * 100% ), 884px);
15}
16
17.a .one {
18  position:relative;
19  border: 5px solid rgb(255, 0, 85);
20  background: rgba(255, 255, 255, 0.8);
21  width: 48%;
22  height: 539px;
23  top:0;
24  left:0;
25  z-index:1;
26}

section .a の大きさ：

恐れ入りますが、どなたか解決方法ご教示いただけますと幸いですm m
すみませんが、どうかよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

background-position のパーセンテージ指定は、おそらく juke-footwork さんが考えているものと異なります。

この Stack Overflow の回答にある図がわかりやすいです。
（この回答はとても素晴らしいのでぜひ通して読んでいただきたいです）
css - Using percentage values with background-position on a linear-gradient - Stack Overflow

投稿2021/12/24 07:37

Lhankor_Mhy

総合スコア36293

juke-footwork

2021/12/24 13:21

コメントがかなり遅くなってしまい、大変申し訳ございません！！前回にひき続き、今回もありがとうございましたm m おかげ様で無事なんとか修正することが出来ました。ありがとうございました。教えていただいたリンク先の内容をまだ全部はしっかりと理解できていないのですが、ぜひしっかりと読ませて頂きたいと思います！貴重な情報ありがとうございました！今回ググっても見つけれなかったのですが、そういう時は今回教えていただいたサイトもチェックしたいと思います。

行動規範の内容に同意します