タイトルに背景を入れる
タイトルの文字が入ったので、今度はバックに背景を入れてみましょう。まずは、下の画像を
先に作っておいた画像保管用のimgフォルダに保存してみて下さい。
←この画像を背景にします。
画像の保存のやり方
- 欲しい画像にマウスを合わせて右クリックしてメニューをだします。
- メニューの中から「名前を付けて画像を保存」を左クリックします。
(この項目がでない画像は取ることができません。)
- 画面上に小さいウィンドゥが出てくるので、そこにある「フォルダの参照」
をクリックします。
- ウィンドゥが少し大きくなり、パソコン上にあるフォルダを選択できるメニューがウィンドゥ左端に出てくるので、
HP作成のフォルダを選び、その中にあるimgのフォルダを2回クリックしてimgフォルダを開きます。
- 最後に「保存」で画像があなたのimgフォルダに保存されます(^^)。
- 名前を変更したい場合は、必ず半角のアルファベットと数字のみで名前を変更して下さい。
画像が取れたら
index.cssの#bannerの{かっこ}内にコピー→→
background:url(./img/check.gif);
をコピーして
background:#708090;のソースを削除します。(background:#708090;は背景の色を指定しているソースで、今回は
画像を背景として使うので削除します。)
削除の仕方は、コピーペーストの要領で消したい部分に青い帯を出してキーボードのBackspaceキーで消せます。
出来たら、実際に見てみましょう。チェック柄が出ていれば成功です(^o^)。
■このページのタグ解説■
- background
- box内の背景を変更する時に使います。#○○○○○○;なら色を、url(./img/○○○.○○○);なら指定した画像を背景にします。