g002
Copyright(C) 2004 web工房 All Rights Reserved
action
【背景画像を1枚だけ表示】（画像の表示位置を変えています）
左上 中上 右上
左中 中央 右中
左下 中下 右下
サンプル/冨士
リンク文字をクリックするとサンプルウィンドウが開きます。
(このセルの背景画像にも｢1枚だけ表示する｣技を適用しています)
web技
◆通常の画像設定(1)----htmlタグで。
※body〜>に記述して下さい。
※通常通り画像がウィンドウ内で繰り返し表示されます。
-----次の行から(copy)-----
<body background='../gif/golf-1.JPG'>
-----上の行まで(copy)-----
◆通常の画像設定(2)----スタイルシートで
※<head>〜</head>に記述して下さい。
※通常通り画像がウィンドウ内で繰り返し表示されます。
-----次の行から(copy)-----
<style type='text/css'>
<!--
body {background-image:url('../gif/golf-1.JPG');}//-->
</style>
-----上の行まで(copy)-----
◆背景画像を1枚だけ表示する(スタイルシート)
※<head>〜</head>に記述して下さい。
※背景画像が1枚だけ表示されます。
※表示する位置は下記を参照して下さい。
-----次の行から(copy)-----
<style type='text/css'>
<!--
body {
background-image:url('../gif/golf-1.JPG');
background-position:right top; //画像の表示位置指定
background-repeat:no-repeat; //繰り返さない指定
}
//-->
</style>
-----上の行まで(copy)-----
◆表示位置の指定(上中下右左指定)
左上 background-position:left top;
中上 background-position:center top;
右上 background-position:right top;
左中 background-position:left;
中央 background-position:center;
右中 background-position:right;
左下 background-position:right bottom;
中下 background-position:center bottom;
右下 background-position:right bottom;
◆表示位置の指定(ウィンドウ左上からのピクセル指定)
左上 background-position:100px 200px;
◆表示位置の指定(ウィンドウ左上からのパーセント指定)
左上 background-position:10% 20%;
◆セルの背景画像に設定例(本技のアクションセル参照)
※テーブルのセル<td〜>に記述します。
※最初の background:#ffffff; は背景色を設定するもので、これを指定しないと、セル内の余白の部分にはウィンドウの背景画像が表示されます。
-----次の行から(copy)-----
<style="background:#ffffff; background-image:url('画像のパス'); background-repeat:no-repeat; background-position:left;">
-----上の行まで(copy)-----
解説等
◆背景画像が画面一杯に繰り返し表示せず、一枚だけすっきりと表示させる技です。
◆スタイルシートを用います。必要に応じて外部タイルシートにすることもできます。
【お勧め技】
◆[技g010]ウィンドウをスクロールしても背景画像は動かない(固定)
※背景画像を1枚だけウィンドウ中央に配置し、ウィンドウをスクロールしてもその背景画像は動かない、という技。おしゃれですよ。メリィの大きな写真を使用してます(^^;)ゞ。
keyword
◇style sheet◇background-image◇background-repeat◇background-position
history
◇(2004.09.27)[技g010]情報を追加
◇(2004.08)設置
注意
◆このファイルで実際に動作しているスクリプトは外部jsスクリプトにしています。
◆サンプルファイルはその都度、新しいウィンドウにタグや文章を書き込んでいます(技[k009]参照)。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----