基本となる背景画像の設定

基本となる背景画像の設定【background-image:url(～)】

ブラウザで表示した時の見え方

基本となる背景画像の設定

ファイル(F) 　編集(E) 　表示(V) 　お気に入り(A) 　ツール(T) 　ヘルプ(H)

文字が読みにくくならないように気をつけましょう。

ソースサンプル

【CSS】

body {
background-image: url("./img/kabegami.gif")
}

【HTML】

文字が読みにくくならないように気をつけましょう。

CSSをHTMLに組み込んだソースサンプル

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">

</style>
<title>基本となる背景画像の設定</title>
</head>
<body>

文字が読みにくくならないように気をつけましょう。

</body>
</html>

[ 黒※説明中のタグ紫※省略可能なタグ赤※変更可能緑※文章など ]

解説

このHTMLファイルのあるディレクトリ内にある「img」というフォルダ内にある「kabegami.gif」という画像への相対パスで記述しています。
URLで直接指定することも出来ます。例→background-image: url("http://www.aichan.biz/flower.gif")
見やすさを考慮し、アニメーションGIFなどは、なるべく背景に使わないようにしましょう。
このページの背景画像はサンプル集用に作ったものです。よかったらお持ち帰りの上ご利用ください。

オプション
url	背景に指定する画像名	background-image: url("./flower.gif")
none	背景画像を指定しない	background-image: none
値	機能	例

AICHAN WEB(Z) > HTML＆CSSサンプル集(S) > CSS - 基本となる背景画像の設定

基本となる背景画像の設定 【background-image:url(～)】

基本となる背景画像の設定【background-image:url(～)】