MB-Support

パソコン初心者のサポートページ

スタイルシートで背景画像を指定する方法 background-image

 背景画像は、body などで指定するページ全体の背景画像と、表(テーブル)やブロックラインの div で指定する事ができます。


ページ背景に画像を使う方法 や、 表(テーブル)の背景に画像を指定する方法 table background では、タグに background="絶対/画像の相対パス" を挿入する方法を紹介しました。 このやり方は、単発的に利用するには便利ですが、複数のページを管理する場合、スタイルシートで指定した方が、変更する時に便利です。 また、スタイルシートでは、背景画像の表示方法を細かく指定できます。

background-image: url('画像アドレス');

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body  {
         background-image: url('画像アドレス');
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


背景画像の繰り返し方法

背景画像を横方向に繰り返す方法

background-repeat: repeat-x;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: repeat-x;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ

背景画像を縦方向に繰り返す方法

background-repeat: repeat-y;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: repeat-y;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


背景画像を1回だけ表示する方法

background-repeat: no-repeat;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: no-repeat;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


背景画像を固定する方法

background-attachment: fixed;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: no-repeat;
	background-attachment: fixed;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


背景画像を表示する位置を指定する

背景画像を表示する位置を指定するには、background-position で単位かパーセントで数字を指定します。左の距離を指定した後、半角スペースを入れて上からの距離を指定します。

background-position: 左px 上px;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: no-repeat;
	background-position: 100px 100px;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


100%を指定した場合、背景画像は右下に表示されます。

background-position: 100% 100%;

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background-image: url('画像アドレス');
	background-repeat: no-repeat;
	background-position: 100% 100%;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


これらのスタイルを一括して指定する方法

背景に関するスタイルは、上で説明した方法に background-color (背景色)を加え、一括して指定する事が可能です。

body  {
         background: #ffffff url("背景画像") scroll no-repeat 100px 100px;
}

順番は、background-color (背景色)、background-image(背景画像)、background-attachment(固定 ノーマルは scroll )、background-repeat(繰り返し処理)、background-position(位置)となります。つまり、上のスタイルを個別に記入した場合は以下になります。

body  {
         background-color: #ffffff;
         background-image: url('背景画像');
         background-attachment: scroll;
         background-repeat: no-repeat;
         background-position: 100px 100px;
}

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body	{
	background: #ffffff url("画像") scroll no-repeat 100px 100px;
} 
-->
</style>
</head>
<body>

</body>
</html>

ブラウザ


背景画像の指定は、body だけではなく、表(テーブル)や、ブロックレベルの div にも指定できます。 注意が必要なのは、画像へのパスを指定するスタイルで、 style="" で個別に指定する場合、url("画像") のダブルクォーテーションを「'」シングルクォーテーションに変更する点です。

body  {
         background-imgae: url("背景画像");
}
<div style="background-imgae: url('背景画像');">



戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項