画像、背景画像の貼り方
画像、背景画像の貼り方


画像の貼り方

説明
<img src="url" alt="画像の説明" style="border:none;width:画像の幅;height:画像の高さ;">

src="url"
画像の置いてあるアドレス

画像の説明

alt="画像の説明"
画像が表示されない時の説明です

説明 style="border:none;"
枠線なしです

説明 style="border:gray solid 1px;"
色(gray) 直線(solid) 太さ(1px)の枠線です

説明 style="border:gray outset 2px;"
色(gray) 浮き上がり線(outset) 太さ(2px)の枠線です

説明 style="border:gray inset 3px;"
色(gray) 沈み込み線(inset) 太さ(3px)の枠線です

説明 style="border:gray double 4px;"
色(gray) 二重線(double) 太さ(4px)の枠線です
枠線の説明はこちらを参照
画像の位置


<div style="text-align:left;">
	<img src="url" alt="説明" style="border:none;width:幅;height:高さ;">
</div>
		
左寄せ
<div style="text-align:center;">
	<img src="url" alt="説明" style="border:none;width:幅;height:高さ;">
</div>
		
真中寄せ
<div style="text-align:right;">
	<img src="url" alt="説明" style="border:none;width:幅;height:高さ;">
</div>
		
右寄せ


枠線の説明はこちらを参照
背景画像の貼り方
<style type="text/css"><!-- から
--></style> までは
<head></head>の中に記述すること
←背景画像
画面全体
<style type="text/css"><!--
body	{
	background:gray;}
--></style>
<body>
		
背景色⇒gray
背景画像が表示されない時に違和感が
ないように背景色と背景画像の色は近い色を


<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl');}
--></style>
<body>
		
画面全体背景画像を指定
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') fixed;}
--></style>
<body>
		
画面全体背景画像を固定
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-x;}
--></style>
<body>
		
背景画像を横に一列
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-x fixed;}
--></style>
<body>
		
背景画像を横に一列 固定
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-x fixed bottom;}
--></style>
<body>
		
背景画像を
横に一列 固定 位置
top 上
center 真中
bottom 下

<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-y;}
--></style>
<body>
		
背景画像を縦に一列
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-y fixed;}
--></style>
<body>
		
背景画像を縦に一列 固定
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') repeat-y fixed right;}
--></style>
<body>
		
背景画像を
縦に一列 固定 位置
left 左
center 真中
right 右

位置を指定して貼る
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') no-repeat;}
--></style>
<body>
		
背景画像を繰り返さない で貼る
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') no-repeat fixed;}
--></style>
<body>
		
背景画像を繰り返さない 固定で貼る
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') no-repeat right bottom;}
--></style>
<body>
		
背景画像をに貼る
<style type="text/css"><!--
body	{
	background:gray url('背景画像のurl') no-repeat right bottom fixed;}
--></style>
<body>
		
背景画像を固定で貼る
left
center
right
top
center
bottom
この組み合わせで背景画像の位置を指定する
位置をパーセントやサイズでの指定も出来ます
ブロック要素の背景に貼る
貼り方は画面全体の時と同じです
<body> ⇒ <div> 等に置き換えて考える
ここに文字を入れる
<div style="width:100%;height:200px;
background:pink url('背景画像のurl') no-repeat 20% 70%;">
	ここに文字を入れる
</div>
		
ここに文字を入れる
ピンクの背景色を指定しない時
<div style="width:100%;height:200px;
background:url('背景画像のurl') no-repeat 20% 70%;">
	ここに文字を入れる
</div>
		
縦横サイズを指定できるように
インライン要素をブロック要素に変換
文字の背景
<span style="display:block;width:100px;height:画像の高さpx;
background:url('背景画像のurl');"> 文字の背景5</span>
<span style="display:block;width:100px;height:画像の高さpx;
background:url('背景画像のurl') no-repeat 左端からの位置 上端からの位置;"></span>
インライン要素の<span></span>を ブロック要素に変換し
サイズを指定すれば大きな画像も背景画像として貼れます
<span style="display:block;width:画像の幅px;height:画像の高さpx;
background:url('背景画像のurl');"></span>
windows IEではインライン要素のままで
縦横サイズを指定できますが 他のブラウザでは指定できません

表示されないので注意が必要です
インライン要素文字の背景に貼る
文字の背景1
<span style="background:pink;">文字の背景1</span>
文字の背景2
<span style="background:pink url('背景画像のurl');"> 文字の背景2</span>
文字の背景3
<span style="background:pink url('背景画像のurl') no-repeat right;">文字の背景3</span>
文字の背景4
<span style="background:transparent url('背景画像のurl') no-repeat right;">文字の背景4</span>
font-size:画像の高さpx;を指定する
文字の背景
no-repeat 背景画像を繰り返さない
文字の背景
.←画像の高さ分の文字
文字の背景← font-size:文字の大きさpt; サイズを変えた文字
.文字の背景
.← color:背景色; 画像の高さ分の文字を背景色と同じ色にして目立たなくする
文字の背景← color:文字の色; サイズを変えた文字の色を指定
.文字の背景
margin-left:ずらす幅px; 文字を背景画像に重ならないようにずらす
.文字の背景
文字の間に背景画像
.文字左文字右
.文字左文字右
linux firefox ver1.0
mac safari ver1.2
mac mozilla ver1.7
mac ie ver5.2
win netscape ver7.1
win opera ver7.23
win ie ver6.0

表示確認
		

top home(geo) home(goo) close
Counter