background-attachment: fixed;の基準値について

実現したいこと

CSS gridで左右にブロックを分けて右サイドにパララックス効果を付けたいのですがどうしてもbackground画像の位置が上手くいかず、コードをチェックしてほしいです。独学の為、根本から間違っている部分があればご指摘お願いします。

発生している問題

CSS gridでcontainerを左右8:26に分けています。
右サイドへパララックスのbackground画像を入れたいのですがどうしても基準値が左端からになってしまい左サイドの下に隠れたような表示になってしまいます。
そこでbackground-positionで基準値を右にずらしましたが、今度は右側が切れてしまいます。
全画面の中央ではなく右サイドの中央でbackground-position: centerを効かせたいのですが上手くやれる方法はないでしょうか。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>@@@@@</title>
6  <meta name="description" content="@@@@@@@@@">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9  <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
10  <link rel="stylesheet" href="css/sub.css">
11  <link rel="icon" type="image/png" href="images/favicon.png">
12</head>
13<body>
14  <div class="container">
15    <div class="guide">
16      <div class="id-wrapper">
17        <div class="face">
18          <a href="index.html"><img src="https://placehold.jp/1000x1000.png" alt="face photo"></a>
19        </div>
20        <h1 class="name"><a href="index.html"><ruby>@@@@<rt>@@@@@@@@</rt></ruby> <ruby>@@@@<rt>@@@@@</rt></ruby></a></h1>
21      </div>
22      <nav class="global-nav">
23        <ul class="nav-menu">
24          <li><a href="profile.html">profile</a></li>
25          <li><a href="works.html">works</a></li>
26          <li><a href="contact.html">contact</a></li>
27        </ul>
28      </nav>
29    </div>
30    <div class="container-right">
31      <div class="profile">
32        <div class="parallax">
33          <h2>Profile</h2>
34        </div>
35        <div class="contents">This is Example.</div>
36        <div class="parallax"></div>
37      </div>
38    </div>
39    <footer>
40      <p>&copy; @@@@@@@@@@@@@ 2021</p>
41    </footer>
42  </div>
43</body>
44</html>

css
1@charset "UTF-8";
2/* intersection
3--------------------------------------------------------- */
4html {
5  font-size: 100%;
6}
7body {
8  font-family: "Helvetica Neue", Helvetica, Arial, "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", sans-serif;
9  background-color: #024058;
10  color: #fff;
11  line-height: 1.7;
12  font-size: 16px;
13}
14a {
15  color: #fff;
16  text-decoration: none;
17}
18img {
19  max-width: 100%;
20}
21ul {
22  list-style: none;
23}
24* {
25  box-sizing: border-box;
26}
27/* container
28--------------------------------------------------------- */
29.container {
30  display: grid;
31  grid-template-columns: 8fr 26fr;
32  animation: fadeIn 3s ease 0s 1 normal;
33}
34@keyframes fadeIn {
35  from {
36    opacity: 0;
37  }
38  to {
39    opacity: 1;
40  }
41}
42.container-right {
43  position: absolute;
44  top: 0;
45  left: calc(8 / 34 * 100vw);
46  background-color: #f6f6f6;
47  width: calc(26 / 34 * 100vw);
48  height: 100%;
49  color: #024058;
50}
51/* guide
52--------------------------------------------------------- */
53.guide {
54  display: grid;
55  grid-template-rows: 13fr 8fr;
56  place-items: center;
57  position: fixed;
58  top:0;
59  left: 0;
60  width: calc(8 / 34 * 100vw);
61  height: 100vh;
62}
63.face {
64  margin: 0 auto;
65  min-width: calc(8 / 34 * 600px);
66  max-width: 224px;
67}
68.face img {
69  border-radius: 50%;
70}
71.name {
72  font-family: serif;
73  letter-spacing: 0.1em;
74  text-align: center;
75  ruby-position: under;
76}
77.name rt {
78  font-size: 8px;
79  letter-spacing: 1em;
80  opacity: 0.5;
81}
82.global-nav {
83  position: relative;
84  display: flex;
85  justify-content: center;
86  height: 100%;
87}
88.global-nav .nav-menu {
89  position: absolute;
90  top: 0;
91}
92.nav-menu a {
93  font-family: serif;
94  font-size: 24px;
95  position: relative;
96}
97.nav-menu a:hover {
98  opacity: 1;
99}
100.nav-menu a::after {
101  content: "";
102  position: absolute;
103  bottom: -4px;
104  left: 0;
105  width: 100%;
106  height: 2px;
107  background-color: #fff;
108  transform: scale(0, 1);
109  transform-origin: center top;
110  transition: transform 250ms;
111}
112.nav-menu a:hover::after {
113  transform: scale(1, 1);
114}
115
116/* profile
117--------------------------------------------------------- */
118.profile {
119  height: 100%;
120}
121.parallax {
122    background-image: url(https://placehold.jp/2048x1364.png);
123    height: 100%;
124    background-attachment: fixed;
125    background-position: center;
126    background-size: cover;
127    background-repeat: no-repeat;
128}
129.parallax h2 {
130    color:#fff;
131    font-family: Quicksand;
132    font-size: 80px;
133    text-shadow: 0px 0px 10px #c0c0c0;
134    text-align: center;
135    position: fixed;
136    width: calc(26 / 34 * 100vw);
137    top: 20%;
138}
139.contents {
140    position: relative;
141    z-index: 1;
142    height:500px;
143    font-size:60px;
144    background: #f89174;
145    padding: 100px 20px;
146    text-align :center;
147    }
148/* footer
149--------------------------------------------------------- */
150footer {
151  position: fixed;
152  bottom: 1vh;
153  left: 1vw;
154}
155footer p {
156  font-family: serif;
157  font-size: 12px;
158  opacity: 0.7;
159}
160

試したこと

css
1.parallax {
2    background-image: url(https://placehold.jp/4543x3456.png);
3    height: 100%;
4    background-attachment: fixed;
5    background-position: calc(8 / 34 * 100vw);
6    background-size: 100% auto;;
7    background-repeat: no-repeat;
8}

background-position: calc(8 / 34 * 100vw);で基準値を右にずらしbackground-size: 100% auto;で調整してみましたが、画像の右側が切れてしまいます。

一日中考えましたがどうしても解決法が浮かばず、、、
お力を貸してください。

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

回答1件

ベストアンサー

全画面の中央ではなく右サイドの中央でbackground-position: centerを効かせたい

background-attachment: scrollに変えるしかない気がします。

また、その場合、背景は、.parallaxではなく、.profileに対して設定する必要があると思います(スクロールバーが付くのは、そこなので)。

以下のように変えると、私の環境では良さげに見えましたよ。

css
1.profile {
2  height: 100%;
3  background-image: url(https://placehold.jp/2048x1364.png);
4  background-attachment: scroll;
5  background-position: center;
6  background-size: cover;
7  background-repeat: no-repeat;
8  overflow-y: scroll;
9}
10.parallax {
11  height: 100%;
12}

投稿2021/04/18 11:28

gpsoft

総合スコア1323

yanju

2021/04/18 13:19

ありがとうございます！まさにそれがやりたかったんですが、この場合だと画像とテキストBOXを順に表示していくことは難しいでしょうか？最終的に画像１BOX1画像２BOX2画像3BOX3といった形を目指していました。また、h2が引っ掛かりスクロールできない領域があり自力で色々試していますが、宜しければこちらも見ていただきたいです。