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

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

ただいまの
回答率

90.47%

  • CSS

    6013questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

画像を連続して重ねて背景にする方法

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 178

イメージ説明
添付画像の様に、画像をパズルのように組み合わせて背景にしたいのですが、上手くいきません。

①の画像にposition relativeとz-indexを使い、②にposition absoluteを使ったら上手くいったのですが、③の画像を②の画像の下に重ねようとした時に上手く重なりません。

どのようにしたら、添付画像のような背景にできますでしょうか。

▼実際に試したコード

<header class="header">
<h1 class="site-title"><img src="●●.png" alt="●●"></h1>
<!--navigation-->
<a href="#">●●</a>
<a href="#">●●</a>
<a href="#">●●</a>
<a href="#">●●</a>
<!--//navigation-->
<button type="button" class="btn-trigger">
    <svg viewBox="0 0 44 44" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="menuButtonTitle">
    <title id="menuButtonTitle">Menu</title>
    <symbol id="bar">
    <rect width="28" height="3" fill="#848484"></rect>
    </symbol>
    <use xlink:href="#bar" x="8" y="14"></use>
    <use xlink:href="#bar" x="8" y="24"></use>
    <use xlink:href="#bar" x="8" y="34"></use>
    </svg>
    Menu
</button>
</header>

<main>
<div class="画像①">
<h2 class="inner">文章</h2>
<h3 class="inner__b">文章</h3>
</div>

<div class="画像②">
<p class="introduction">文章</p>
</div>

<div class="about">

<h2>画像③</h2>
<h3>文章</h3>
<p>文章</p>
<h3>見出し</h3>
<p>文章</p>
<h3>見出し</h3>
<p>文章</p>

</div>
.画像①{
    position: relative;
    background-image: url();
    too:52px;
    left: 0;
    height: 436px;
    z-index: 10;
    margin-top: 52px;
    background-position: center bottom;
    background-size:cover;
}

.画像②{
    position: absolute;
    background-image: url();
    top:468px;
    left: 0;
    height: 269px;
    z-index: 9;
    background-position: center bottom;
    background-size:cover;
}
.画像③{
    position: absolute;
    background-image: url();
    top:468px;
    left: 0;
    height: 657px;
    z-index: 8;
    background-position: center bottom;
    background-size:cover;
}

▼上記コードを入れた結果
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • yoshinavi

    2018/06/10 11:41

    ①のdivを親とするのならば、②③はそのdiv内に書く事です。また、別のdivを用意して①②③を入れるかのどちらかだと思います。

    キャンセル

  • yoshinavi

    2018/06/10 19:03

    状況が再現するHTML・CSSのコードを提示されると、回答を得やすくなると思います。

    キャンセル

  • deliciousgohan

    2018/06/11 20:17

    ご連絡遅れまして申し訳ございません。試してみたいと思います!!

    キャンセル

まだ回答がついていません

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

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

関連した質問

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

  • CSS

    6013questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。