画像、背景画像の貼り方

画像の貼り方

<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"><!--
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>

縦横サイズを指定できるように
インライン要素をブロック要素に変換

文字の背景

文字の背景5

インライン要素のをブロック要素に変換し
サイズを指定すれば大きな画像も背景画像として貼れます

windows IEではインライン要素のままで
縦横サイズを指定できますが他のブラウザでは指定できません
表示されないので注意が必要です

インライン要素文字の背景に貼る

文字の背景1
文字の背景1

文字の背景2
 文字の背景2

文字の背景3
文字の背景3

文字の背景4
文字の背景4

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

表示確認