ページの背景に画像を配置します。
ここでは
<body>に対してbackground-imageプロパティを設定して背景画像を配置します。具体的には以下のように記述します。body { background-image: url('画像ファイルの名前'); }今回、配置する画像は以下のものを使用してください。
red01.png←ここからダウンロードできます。
上の画像を「右クリック」→「画像を名前をつけて保存」などで rensyu フォルダ内に画像を保存してから、以下のスタイルシート設定を行ってください。body { background-image: url('red01.png'); }しかし、正しく設定をしても背景画像は想定と異なる表示のされ方をします。
背景画像は通常 上下左右にタイル状に敷き詰めて表示されます。 単純に画像を配置すると、以下のように見えるはずです。 (見やすいように、縮小して表示しています)
画像がタイル状に敷き詰められないようにします。
<body>に対してbackground-repeatプロパティを追加しrepeat-xという値を設定すると、画像を横方向のみに敷き詰めることができ、その結果、理想的なグラデーションが実現できます。body {
background-image: url('red01.png');
background-repeat: repeat-x; }通常、背景画像はタイル状に敷き詰められますが……
background-repeat: repeat-x;を追加すると、x方向、つまり横方向にだけ画像が並ぶように敷き詰められるというわけです。
ページ上に文字を書きます。HTMLファイルを開き、好きなメッセージを記入します。ここでは３行分「テストメッセージ」と入力します。
「テストメッセージ」なんてだっさい文字を書きたくない人は、代わりに何かカッコイイ文章を書いてもらってもＯＫです。😅
テストメッセージ<br>テストメッセージ<br>テストメッセージ<br>テストメッセージ
テストメッセージ
テストメッセージ文字が表示されましたが、赤い部分と重なって見づらいです。
文字と背景の重なりを解消するために、CSSで上方向の余白（
padding-top）を「140px」設定し、文字が赤い部分に重ならないようにします。body {
background-image: url('red01.png');
background-repeat: repeat-x;
padding-top:140px; }上方向に余白
padding-topが設けられたことで、文字の位置が全体的に下にずれました。背景デザインと文字が重ならないことを確認してください。
テストメッセージ
テストメッセージ
テストメッセージもう少し長い文章を使った例
効果が分かりにくかったかもしれないので、もう少し長めの文章でデモンストレーションをしてみます。参考にしてください。
デザインと重なった例（読みにくい）
実行例 重なりを回避した例（読みやすい）