背景・画像に関してのスタイルシート具体例
背景・画像に関してのスタイシートの具体的な書き方です。
背景に表示させる画像を一枚だけにしたり、縦一列あるいは横一列だけの背景にすることもできます。 スクロールした時に固定されたままで動かない背景も作ることができます。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
背景・画像に関してのスタイルシート具体例       ▲
背景に画像を表示
background-image: url(haikei.jpg);
background-image: url( )と書き、( )の中にファイル名を記入すると背景が表示されます。


<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-image: url(haikei5.jpg);}  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style=" background-image: url(haikei5.jpg);">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。


背景に画像を1枚だけ表示
background-repeat:no-repeat;
背景画像を1枚だけにしたい時は、background-repeat:no-repeat と追加します。左上に背景が1枚だけ表示されます。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-image: url(ha2.jpg); background-repeat:no-repeat;}  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。<BR><BR><BR><BR></DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style=" background-image: url(ha2.jpg); background-repeat:no-repeat;">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 <BR><BR><BR><BR> </DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。




上に戻る

1枚の背景画像を特定の位置に表示
background-position:200px 40px;
表示を1枚だけにした背景を、特定の場所に表示させます。 background-position:200px 40pxと追加すると、左から200px ・上から 40px の位置に背景が1枚だけ表示されます。
左とか上とかといったときの基準は『どこに』に何を使ったかによって異なります。
BODYを使った場合は、表示画面の一番左上が基準になりますし、DIV を使った場合は本文中の<DIV>を 書いた場所が基準になります。
この例題の場合は『どこに』にDIV を使い、「IEの表示」のところに<DIV>タグ を付けていますので、そこを基準にして左に200px 、右に40pxの位置から画像が表示されます
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-image: url(ha2.jpg); background-repeat:no-repeat; background-position:200px 40px}  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。<BR><BR><BR><BR></DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style=" background-image: url(ha2.jpg); background-repeat:no-repeat; background-position:200px 40px">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 <BR><BR><BR><BR> </DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。




上に戻る

横1列に、背景画像を繰り返し表示
background-repeat:repeat-x;
上部に横1列だけ、背景を表示させることもできます。 background-repeat:repeat-x;と記入すると、横方向に1列だけ背景が表示されます。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-image: url(ha2.jpg); background-repeat:repeat-x;}  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
<BR><BR><BR><BR>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style=" background-image: url(ha2.jpg); background-repeat:repeat-x;"> <BR><BR><BR><BR>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 </DIV>
</BODY></HTML>




テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。



縦1列に、背景画像を繰り返し表示
background-repeat:repeat-y;
左に縦1列だけ、背景を表示させることもできます。 background-repeat:repeat-y; とすると、縦方向に1列だけ背景が表示されるようになります。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-image: url(ha2.jpg); background-repeat:repeat-y;}  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
<BR><BR><BR><BR>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style=" background-image: url(ha2.jpg); background-repeat:repeat-y;"> <BR><BR><BR><BR>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 </DIV>
</BODY></HTML>




テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

上に戻る

スクロールしない背景画像
background-attachment:fixed;
background-attachment:fixedとすると、ページをスクロールさせても背景は固定され動きません。
判りにくいと思いますが、このページの全体の背景は固定してあります。
<HTML><HEAD><TITLE>　　</TITLE>
  BODY{ background-attachment:fixed;}  
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY style="background-attachment:fixed;">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。
</BODY></HTML>
上に戻る TOPページに戻る 前に戻る 順番に次を見ていく