ページ背景に画像を配置する2

[戻る]

CSSを使うと、背景画像の表示方法を様々に設定できます。
ここでは、画像をページの右下に固定配置する設定を行います。

このページの右下部分を見てください。実際に画像が配置されています。また、ページをスクロールしても、常に右下に画像が表示されます。
なお、色が薄めの画像なので、画面によっては見づらい場合があります。ご了承ください……。😅

このように表示されるページ rensyu6.html を作成してください。

作成手順

  1. 新たに作成する rensyu6.html の内容は、好きなものでOKです。<body>の範囲内に、適当な文章を入力するなどしておきましょう。ただし他の問題で書いた内容そのままでは混乱するので、他と区別がつくように何か別のことを書いておきましょう。

    適当な文章の例

    夏目漱石『こころ』(1914) より、文章をランダムに組み替えたもの。
    支離滅裂な文章になっているので、内容は気にしないでください。
     : 省略 <body> <div class="main"> <h1>サンプルテキスト</h1> <p>その時私はぽかんとしながら先生の事を褒めていました。三度目に帰国したのですから、彼がどうしてそんなに見苦しい服装をしているだろうか母はこうなると想像しました。<br>しかし少時すると、どうしても宜ござんす、差し上げましょうといいました。その次の日にもまた同じ事を切り出すのは、無理という点にばかり眼を着けました。それにはKに向ってもし自分が殉死するならば、たとい懐中に余裕ができてきた。それが傍にいて看護をしてくれました。<br>一図な彼は笑うだけで、実は 想像したんですかなぜという訳もありません。その時私は明治の精神に没頭するつもりだといった。その時私の知ろうとする点には、茶だの花だのを指して、これは様子が違うと明らかに意識した時に確信したのだけれども、東京へ立つ気が起らなかった。しかし彼の室の前へ顔を出した。そのためでもありましょうが、こっちでも一切構わないと書いてあるのです。<br>私は事情が自分の勝手だという観念が私の依頼に取り合うまいと思いながらも私は大した苦痛も感ぜずに済んだかも知れません。暗いものを凝と見詰めて、その冬が尽きても、何にもなりません。<br>しかしもしおれの方にばかり気を取られていないごとく、従妹も私を愛している妻とその母親の前に逼っている頃でしたから、自分に詫まる事のできない身体でした。汚れたのを考えているのだと私は向い合せに席を立ち掛けると、奥さんがお嬢さんの結婚について何かしているでしょう。<br>私が心配しているうちには君が恋を求めながら相手を得られない代りに危険もないが、ただ口の先で鳴っていますかねと聞かれた事をぜひとも周囲の人に愛の目的物に向って、女としてはどうするだろうか。先生帽子が落ちましたありがとう身体を半分起してそれを食う時に、私の自尊心にとって見惨なもので、いくらでもあると好いんですが、今日は珍しいところを拝見したようにこういった。<br>玉突きだのアイスクリームだのという問題は、その道を歩いて進まなければ私には物足りない結果私の所では満足が得られない代りに、淋しい今の私を我慢する代りに、私は嬉しかったのです。お嬢さんと私だけのようなものの宅へ行くような事さえ口外しましたと私が答えた。そう毎年家へ帰って来たのだが、君の親戚なぞの中に寝起きしているか知りません。<br>そういうと、夫の方はどうした訳かと思いました。それから今まで私に世話になったその後も、あまり変りはなかった。私はその決心でやり出したのですが、彼の室の襖の影から姿を見せる事もありますが、話すべき筋だから話しておきます。そこから彼の室に帰りました。私はとうとう帽子を被って、海老茶や紺や藍の色を、面白い現象の一つであったなら、私だって強いて彼を私の前の病人を忘れて、外の人に気兼をして往来を歩き始めた。私は女らしかったのです。あなたが私からよそへ動いて来た。同時に私には親類はありません。</p> </div> </body>  : 省略

    ついでに文章の横幅が600ピクセル以上に広がらないよう制限しつつ、中央寄せにすることで、何となくレイアウトしておきます。

    .main { max-width: 600px; margin: 0 auto; }

    サンプルテキスト

    その時私はぽかんとしながら先生の事を褒めていました。三度目に帰国したのですから、彼がどうしてそんなに見苦しい服装をしているだろうか母はこうなると想像しました。
    しかし少時すると、どうしても宜ござんす、差し上げましょうといいました。その次の日にもまた同じ事を切り出すのは、無理という点にばかり眼を着けました。それにはKに向ってもし自分が殉死するならば、たとい懐中に余裕ができてきた。それが傍にいて看護をしてくれました。
    一図な彼は笑うだけで、実は 想像したんですかなぜという訳もありません。その時私は明治の精神に没頭するつもりだといった。その時私の知ろうとする点には、茶だの花だのを指して、これは様子が違うと明らかに意識した時に確信したのだけれども、東京へ立つ気が起らなかった。しかし彼の室の前へ顔を出した。そのためでもありましょうが、こっちでも一切構わないと書いてあるのです。
    私は事情が自分の勝手だという観念が私の依頼に取り合うまいと思いながらも私は大した苦痛も感ぜずに済んだかも知れません。暗いものを凝と見詰めて、その冬が尽きても、何にもなりません。
    しかしもしおれの方にばかり気を取られていないごとく、従妹も私を愛している妻とその母親の前に逼っている頃でしたから、自分に詫まる事のできない身体でした。汚れたのを考えているのだと私は向い合せに席を立ち掛けると、奥さんがお嬢さんの結婚について何かしているでしょう。
    私が心配しているうちには君が恋を求めながら相手を得られない代りに危険もないが、ただ口の先で鳴っていますかねと聞かれた事をぜひとも周囲の人に愛の目的物に向って、女としてはどうするだろうか。先生帽子が落ちましたありがとう身体を半分起してそれを食う時に、私の自尊心にとって見惨なもので、いくらでもあると好いんですが、今日は珍しいところを拝見したようにこういった。
    玉突きだのアイスクリームだのという問題は、その道を歩いて進まなければ私には物足りない結果私の所では満足が得られない代りに、淋しい今の私を我慢する代りに、私は嬉しかったのです。お嬢さんと私だけのようなものの宅へ行くような事さえ口外しましたと私が答えた。そう毎年家へ帰って来たのだが、君の親戚なぞの中に寝起きしているか知りません。
    そういうと、夫の方はどうした訳かと思いました。それから今まで私に世話になったその後も、あまり変りはなかった。私はその決心でやり出したのですが、彼の室の襖の影から姿を見せる事もありますが、話すべき筋だから話しておきます。そこから彼の室に帰りました。私はとうとう帽子を被って、海老茶や紺や藍の色を、面白い現象の一つであったなら、私だって強いて彼を私の前の病人を忘れて、外の人に気兼をして往来を歩き始めた。私は女らしかったのです。あなたが私からよそへ動いて来た。同時に私には親類はありません。

  2. 背景に配置するための画像を用意します。

    下の画像 city.jpg を使用します。ダウンロードして、rensyuフォルダ内に保存してください。

    city.jpg

    「右クリック」→「名前をつけて画像を保存」などでダウンロードできます。
    実際にはこの2倍の大きさがある画像です。

  3. 画像をページの背景に配置します。

    <body>に対して background-image プロパティを使用すれば、背景画像を配置できます。

    body { background-image: url('city.jpg'); }

    background-image - MDN

    画像はタイル状に敷き詰められます。
    見にくくなるので下の実行例では、さっき書いた適当な文章は省略しています。

  4. タイル状に敷き詰められたせいで背景画像が繰り返し表示されますが、これを防ぐために、さらに background-repeat プロパティを追加します。
    値に no-repeat を指定することで、画像が敷き詰められることを防ぎ、1回だけ表示されます。

    body {
      background-image: url('city.jpg');
      background-repeat: no-repeat; }

    画像が1回だけ表示されました。

    background-repeat - MDN

  5. 画像をページの右下に配置したいと思います。

    画像を右下に配置するために、<body>background-position プロパティを追加し right bottom という値を設定します。

    body {
      background-image: url('city.jpg');
      background-repeat: no-repeat;
      background-position:right bottom; }

    画像がページの右下に配置されました。

    ただし実際にはページの大きさは「文章が書いてあるエリアまで」という仕様になっているので、「文章が書いてある範囲の右下」という中途半端な位置に画像が表示されるかもしれません……。
    ちょっと変な感じかもしれませんが、次でこの問題を解決するので、そのまま先に進みます。

  6. ページを上下にスクロールさせても、画像が常に右下に固定で表示されるようにします。

    <body>background-attachment プロパティを追加し、fixed という値を設定します。

    background-attachment - MDN

    body {
      background-image: url('city.jpg');  /* 背景画像を指定 */
      background-repeat: no-repeat;       /* 背景画像を敷き詰めない */
      background-position:right bottom;   /* 背景画像をページの右下に配置 */
      background-attachment: fixed;       /* 背景画像を固定する */
    }

    これで、画像が画面の右下に固定され、ページをスクロールしても常に右下固定で表示されるようになります。ブラウザ上でページを上下にスクロールしてみて、画像の位置が動かないことを確認してください。

    また、ブラウザの画面を上下に伸ばしたり縮めたりしても、画像は必ずページの右下に表示されるはずです。(HTML側には、ある程度長い文章を入力したほうが効果を実感しやすいでしょう)

    このように background-positionbackground-attachment による画像の固定配置は、たとえば背景にキャラクターをワンポイントとして配置するなど、さまざまな用途に使えます。参考にしてください。