MAJIDEKA.COM－背景画像

● ２時限目 ●



[文字・画像] or [★ HTML講座 ★] or [背景色]

[背景画像]

　背景画像を貼りつけるには

　背景画像を固定するには

　背景画像を横方向のみ・縦方向のみに並べるには

　背景画像を１つのみ表示するには

　背景画像をウィンドウの全体に表示するには

・<body>タグにbackground属性を指定する方法(<body background="xxx.gif">)

　背景画像を貼りつけるには、background属性とbgproperties属性を指定します。
　background="xxx.gif"の""内には画像のURLを記入してください。
　bgproperties属性のfixedを指定することで画像が固定されます。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<body background="xxx.gif">
　ブラウザにはこのように表示されます。

・スタイルシートを使用して背景画像を貼りつける方法

背景画像を貼りつけるには、スタイルシートを使用します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

背景画像を固定するには

・<body>タグにbackground属性とbgproperties属性を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　 (<body background="xxx.gif" bgproperties="fixed">)

　背景画像を固定するには、background属性とbgproperties属性を指定します。
　background="xxx.gif"の""内には画像のURLを記入してください。
　bgproperties属性のfixedを指定することで画像が固定されます。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<body background="xxx.gif" bgproperties="fixed">
　ブラウザにはこのように表示されます。

・スタイルシートを使用して背景画像を固定する方法

背景画像を固定するには、スタイルシートを使用します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

背景画像を横方向のみ・縦方向のみに並べるには

・スタイルシートを使用して背景画像を横方向のみ・縦方向のみに並べる方法

背景画像を横方向のみ・縦方向のみに並べるには、スタイルシートのbackground-repeat: repeat-?;を指定します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　repeat-?の?にxを記入すると横方向のみに、yを記入すると縦方向のみに並べることができます。
　スタイルシートのbackground-position:を指定することにより、表示位置を指定することもできます
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

▲ページトップへ

背景画像を１つのみ表示するには

・スタイルシートを使用して背景画像を１つのみ表示する方法

背景画像を１つのみ表示するには、スタイルシートのbackground-repeat: no-repeat;を指定します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　スタイルシートのbackground-position:を指定することにより、表示位置を指定することもできます
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

背景画像をウィンドウの全体に表示するに

・スタイルシートを使用して背景画像をウィンドウの全体に表示する方法

　背景画像をウィンドウの全体に表示するには、スタイルシートを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<body topmargin="0" leftmargin="0"> <img src="xxx.gif" width="100%" height="100%" style="position: absolute; z-index: 1; top: 0px; left: 0px;"> <div style="position: absolute; z-index: 2; top: 10px; left: 10px;"></div> </body>
　ブラウザにはこのように表示されます。

背景画像を指定した位置に表示するには

・スタイルシートを使用して背景画像を指定した位置に表示する方法

背景画像を指定した位置に表示するには、スタイルシートを使用します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

▲ページトップへ

画像クリックで背景画像を変更するには

・JavaScriptを使用して画像クリックで背景画像を変更する方法

画像クリックで背景画像を変更するには、JavaScriptを使用します。
　src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してみてください。
　　<html> <head> <title>画像クリックで背景画像変更</title> <script type="text/javascript">  </script> </head> <body> <a href="#" onmousedown="chg_img('pic1');" onmouseout="chg_img('clear');"> <img src="xxx.gif" width="50" height="50" border="0"></a> <a href="#" onmousedown="chg_img('pic2');" onmouseout="chg_img('clear');"> <img src="yyy.gif" width="50" height="50" border="0"></a> <a href="#" onmousedown="chg_img('pic3');" onmouseout="chg_img('clear');"> <img src="zzz.gif" width="50" height="50" border="0"></a> </body> </html>
　ブラウザにはこのように表示されます。

曜日別に背景画像を表示するには

・JavaScriptを使用して曜日別に背景画像を表示する方法

曜日別に背景画像を表示するには、JavaScriptを使用します。
　wbgimg[0]から順に日曜日～土曜日となっています。
　wbgimg[n]="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.