背景画像を繰り返さない方法
CSSを使用した記述方法
記述方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style type="text/css"> <!-- body{ background-image : url("../img/smp.gif"); background-repeat : no-repeat; background-position : centercenter; } --> </style> </head> <body> </body> </html>
解説
表示サンプルを見たい方は以下をクリックして下さい(別窓でサンプルが表示されます)。
背景画像の指定は今まで通り「background-image」にて指定して下さい。詳しくはこちらを参照ください。
「background-repeat: no-repeat;
」という記述にて、縦横どちらの方向にも繰り返さないことを指定します。
そして、「background-position: center center;
」と言う記述で表示位置を指定することもできます。
詳しくはこちら。
- background-position
- 背景画像の表示開始位置を指定します。 %値や数値で指定する場合は、値を横方向縦方向の順にスペースで区切って指定。 %値で指定する際は、背景画像が表示される領域の左上からの距離を横方向と縦方向の順で指定。 数値で指定する際は、背景画像が表示される領域の左上からの距離を、 横方向と縦方向の順で「px」等の単位をつけて指定。 数値にはマイナスの値も指定することができます。 又、left,center,rightや、top,center,bottomといった位置を表す単語でも指定が可能。 この場合それぞれ、0%、50%、100%と同意。