現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：背景に画像の指定

背景に画像の指定

「横幅を広くするには」で指定したものと同じに「幅760px」で考えます。

変更部分
  • body
  • #wrapper
  • その他事前変更
    • 以前指定していた各パーツの背景は削除しています。
    • 余白を指定しています。
    • 画像は「img」というフォルダに保存したとします。
body{
font-size: 85%;
text-align:center;
padding: 0;
margin: 0;
}

#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
}

/*----------下記が変更後のソース*/

body{
font-size: 85%;
text-align:center;
padding: 1em 0;
margin: 0 auto;
background: url(img/bg-body.gif);
}

#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
background-color: #ffffff;
color: #000000;
}

カスタマイズサンプル

#wrapper部分で背景色を指定しないと（ここでは白）、body部分の色や画像が透過されます。（逆に透過させる事もひとつのデザインテクニックです）

▲Top

背景に画像の指定-header

変更部分
  • #header
  • #header p
  • その他事前変更
    • 上記body部分と同様
    • 「幅760px」「高さ200px」の画像を用意しました。
    • タイトルを見出しに変更します。
#header{
padding: 0;
margin: 0;
height: 100px;
background-color: silver;
color: black;
}

#header p{
padding: 0;
margin: 0;
}

/*----------下記が変更後のソース*/

#header{
padding: 0;
margin: 0;
height: 200px;
background: url(img/bg-header.jpg) no-repeat 0 0;
}

h1{
font-size: 200%;
padding: 50px 0 0 20px;
margin: 0;
}

カスタマイズサンプル

背景画像の指定記述は下記のソースをひとつにまとめた形です。

background-image: url(img/bg-header-customize.jpg);
background-repeat: no-repeat;
background-position: 0 0;

▲Top

背景に画像の指定-footer

変更部分
  • #footer
  • #footer p
  • その他事前変更
    • 上記body部分と同様
    • 画像は上記#header部分で使用した画像の再利用です。（省エネ）
#footer{
text-align: center;
padding: 0;
margin: 0;
clear: both;
width: 100%;
background-color: silver;
color: black;
}

#footer p{
padding: 0;
margin: 0;
}

/*----------下記が変更後のソース*/

#footer{
text-align: center;
padding: 0;
margin: 0;
clear: both;
width: 100%;
background: url(img/bg-header.jpg) no-repeat 0 100%;
}

#footer p{
padding: 1em 0; margin: 0;
}

カスタマイズサンプル

▲Top

背景に画像の指定-sidebar

変更部分
  • #sidebar
  • その他事前変更
    • 上記body,#header部分と同様
    • リストの指定
#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
}

#sidebar{
padding: 0;
margin: 0;
width: 180px;
float: right;
color: black;
background-color: #ffd5d5;
}

/*----------下記が変更後のソース*/

#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
background: #ffffff url(img/bg-sidebar.gif) repeat-y 100% 0; -----右側で下方向に繰り返し
color: #000000;
}

#sidebar{
padding: 10px;
margin: 0;
width: 160px;
float: right;
}

#sidebar ul{     -----メニュー部分
list-style-type: none;
margin: 0;
padding: 0;
}

#sidebar li{           -----メニュー部分に画像を指定
padding: 5px 0 5px 15px;
background: url(img/listmark.gif) no-repeat 0 50%;
border-bottom: 1px solid #99cc00;
}

#sidebar li a{         -----メニュー部分のリンク指定
text-decoration: none;
}

#sidebar li a:hover{   -----メニュー部分のマウスオーバー時の指定
text-decoration: underline;
color: #ff0000;
}

カスタマイズサンプル

ポイント

#sidebarへ画像を指定するのもひとつの手段ですが、#sidebarの内容量により高さが変動すると画像が途切れてしまいます。サイドバーいっぱいに画像を繰り返したい時は上記のように#wrapperへ指定するのもひとつのテクニックです。

#sidebarへ指定したサンプル

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース