【HTML＆CSS】background-attachmentの使い方をわかりやすく説明

こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、background-attachment プロパティの使い方についてわかりやすく解説します。

このプロパティを使うことで、スクロールしたときの背景画像の挙動について設定することができます。

background-attachmentプロパティを使って自分好みのwebサイトを目指しましょう。

この記事の内容

基礎知識
background-positionのセレクタ
background-attachmentの値
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

基礎知識

background-attachmentプロパティは、CSSで使用される言語です。

CSSとは、webサイトのデザインを担当する言語です。

詳しくはこちらの記事をどうぞ。

CSSの基本構造は以下の通りです。

そして今回、background-attachmentプロパティを使うので、以下の構造となります。

“background”(背景)

“attachment”(取り付け)

という意味です。

background-positionのセレクタ

background-attachmentのセレクタにはすべての要素を書くことができます。

つまり、

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

など、どの場所にも設定できるというわけです。

background-attachmentの値

値に書けるのは

scroll(初期値)
fixed
local

の3つです。

それぞれ見ていきます。

今回はこのsample.htmlファイルを読み込みます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>background-repeatサンプル</title>
    <link rel="stylesheet" href="./sample.css">
  </head>
  <body>
    <div class="container">
    <p>サンプルです。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
    <p>値の違いを見ていきます。</p>
  </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>background-repeatサンプル</title>

</head>

<body>

<p>サンプルです。</p>

<p>値の違いを見ていきます。</p>

</div>

</body>

</html>

本文が長くなっていてスクロールが必要な状態です。

CSSファイルは以下の状態です。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:center;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:center;

}

background-imageプロパティで水玉の画像を読み込んでいます。

background-repeatプロパティで繰り返し表示はなしにしています。

background-positionプロパティで中央表示にしています。

※ブラウザ表示(クリックで拡大表示されます)

scroll

値にscrollを指定します。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:scroll;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:center;

background-attachment:scroll;

}

※ブラウザ表示(クリックで拡大表示されます)

スクロールしたとき背景画像も一緒に動きます。

scrollは初期値なので、値を設定しなくても同じ動きをします。

fixed

値にfixedを指定します。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed;

}

※ブラウザ表示(クリックで拡大表示されます)

スクロールしても背景画像は固定されたままです。

local

localはページの一部がスクロール表示だったとき、その中の背景画像の挙動を設定するための値です。

こんなページがあったとします。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>background-attachmentサンプル</title>
    <link rel="stylesheet" href="./sample.css">
  </head>
  <body>
    <div>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
      <p>値の違いを見ていきます。</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>background-attachmentサンプル</title>

</head>

<body>

<div>

<p>値の違いを見ていきます。</p>

</div>

</body>

</html>

div{
  width:500px;
  height:500px;
  overflow:scroll;
  background-image:url(./waterball.png)
  }

div{

width:500px;

height:500px;

overflow:scroll;

background-image:url(./waterball.png)

}

※ブラウザ表示(クリックで拡大表示されます)

500px四方のdivタグの中にテキストを入力しました。

そして、入りきらないテキストはスクロールすれば見ることができます。

divタグの背景に水玉画像を設定してあります。

スクロール時の背景画像は、固定されています。

このときに、localを設定します。

div{
  width:500px;
  height:500px;
  overflow:scroll;
  background-image:url(./waterball.png);
  background-attachment:local;
  }

div{

width:500px;

height:500px;

overflow:scroll;

background-image:url(./waterball.png);

background-attachment:local;

}

※ブラウザ表示(クリックで拡大表示されます)

スクロールすると一緒に背景画像が動くようになります。

※ページの一部をスクロール表示にしているとき、その中の背景画像はscrollやfixedにしても固定されています。

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか？

ググるのが面倒
エラーの対応に1日消費
重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の２つ。

TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方
テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方

この２つには以下のような特典もあります。

TechAcademy

1週間の無料体験
１コース申し込むと、もう１コースプレゼント

テックアカデミー

1週間以内に申告あれば全額返金
転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

ランサーズ：1件10万くらい
中小企業：1件30万くらい
大手企業：桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

・TechAcademy：無料で1週間体験
・テックキャンプ：全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。