質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 247

score 4

実現したいこと

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

発生している問題

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

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>@@@@@</title>
  <meta name="description" content="@@@@@@@@@">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/sub.css">
  <link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
  <div class="container">
    <div class="guide">
      <div class="id-wrapper">
        <div class="face">
          <a href="index.html"><img src="https://placehold.jp/1000x1000.png" alt="face photo"></a>
        </div>
        <h1 class="name"><a href="index.html"><ruby>@@@@<rt>@@@@@@@@</rt></ruby> <ruby>@@@@<rt>@@@@@</rt></ruby></a></h1>
      </div>
      <nav class="global-nav">
        <ul class="nav-menu">
          <li><a href="profile.html">profile</a></li>
          <li><a href="works.html">works</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </nav>
    </div>
    <div class="container-right">
      <div class="profile">
        <div class="parallax">
          <h2>Profile</h2>
        </div>
        <div class="contents">This is Example.</div>
        <div class="parallax"></div>
      </div>
    </div>
    <footer>
      <p>&copy; @@@@@@@@@@@@@ 2021</p>
    </footer>
  </div>
</body>
</html>
@charset "UTF-8";
/* intersection
--------------------------------------------------------- */
html {
  font-size: 100%;
}
body {
  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;
  background-color: #024058;
  color: #fff;
  line-height: 1.7;
  font-size: 16px;
}
a {
  color: #fff;
  text-decoration: none;
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
}
* {
  box-sizing: border-box;
}
/* container
--------------------------------------------------------- */
.container {
  display: grid;
  grid-template-columns: 8fr 26fr;
  animation: fadeIn 3s ease 0s 1 normal;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.container-right {
  position: absolute;
  top: 0;
  left: calc(8 / 34 * 100vw);
  background-color: #f6f6f6;
  width: calc(26 / 34 * 100vw);
  height: 100%;
  color: #024058;
}
/* guide
--------------------------------------------------------- */
.guide {
  display: grid;
  grid-template-rows: 13fr 8fr;
  place-items: center;
  position: fixed;
  top:0;
  left: 0;
  width: calc(8 / 34 * 100vw);
  height: 100vh;
}
.face {
  margin: 0 auto;
  min-width: calc(8 / 34 * 600px);
  max-width: 224px;
}
.face img {
  border-radius: 50%;
}
.name {
  font-family: serif;
  letter-spacing: 0.1em;
  text-align: center;
  ruby-position: under;
}
.name rt {
  font-size: 8px;
  letter-spacing: 1em;
  opacity: 0.5;
}
.global-nav {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
}
.global-nav .nav-menu {
  position: absolute;
  top: 0;
}
.nav-menu a {
  font-family: serif;
  font-size: 24px;
  position: relative;
}
.nav-menu a:hover {
  opacity: 1;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 250ms;
}
.nav-menu a:hover::after {
  transform: scale(1, 1);
}

/* profile
--------------------------------------------------------- */
.profile {
  height: 100%;
}
.parallax {
    background-image: url(https://placehold.jp/2048x1364.png);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.parallax h2 {
    color:#fff;
    font-family: Quicksand;
    font-size: 80px;
    text-shadow: 0px 0px 10px #c0c0c0;
    text-align: center;
    position: fixed;
    width: calc(26 / 34 * 100vw);
    top: 20%;
}
.contents {
    position: relative;
    z-index: 1;
    height:500px;
    font-size:60px;
    background: #f89174;
    padding: 100px 20px;
    text-align :center;
    }
/* footer
--------------------------------------------------------- */
footer {
  position: fixed;
  bottom: 1vh;
  left: 1vw;
}
footer p {
  font-family: serif;
  font-size: 12px;
  opacity: 0.7;
}

試したこと

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


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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

.profile {
  height: 100%;
  background-image: url(https://placehold.jp/2048x1364.png);
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: scroll;
}
.parallax {
  height: 100%;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/18 22:19

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

    キャンセル

  • 2021/04/18 22:41

    すみませんが、おっしゃる意味が理解できません。元の質問文に追記するか、別質問を投げていただけますか? 文章だけで伝えるのは厳しそうなので、スクショや図解があるとベターですね。

    キャンセル

  • 2021/04/18 23:17

    失礼しました!
    ただいま別質問にてスクショと参考サイトを付けて投稿させていただきました。
    https://teratail.com/questions/333947

    お時間的に可能であれば引き続きよろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る