こんにちは、初心者向けCSS講座 第13回目の講座です。 前回は、CSSで背景に色を付ける方法についてご紹介しました。 今回はCSSで背景に画像を挿入する「background-image」プロパティをご紹介します。
目次
背景に画像を入れる
background-imageプロパティ
背景に画像を付けるときは「background-image」プロパティを使います。 画像を挿入することによりページの印象が変わったりコンセプトがわかりやすくなります。 指定方法はプロパティの後ろに「url」、続いて( )内に画像のパスを記述します。 画像はCSSファイルから見たファイル位置を書きましょう。 例：background-image : url (image/pic.jpg) imageファイルの中にあるpic.jpgという名前の画像を指定してる
background-imageプロパティを使ってみよう
それでは実際にbackground-imageプロパティをつかって背景に画像を付けてみましょう。 今回は下のHTMLのサンプルコードを使って背景画像を入れていきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を挿入しよう</title>
<meta name="description" content="背景画像挿入「background-image」">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
おいしいオレンジを収穫しました！
</h1>
</body>
</html>
次に背景画像を入れるCSSを記述します。 今回はみかんの画像を背景に挿入したいと思います。 画像はimageフォルダーの中に「orange.jpg」の名前を付けて保存しました。 h1の文字は画像の色合いの都合上、カラーコードを使って白色に設定しています。
@charset "UTF-8";
body{
background-image: url(image/orange.jpg);
}
h1{
color: #fff ;
}
ブラウザで表示すると背景に画像が挿入されたことがわかります。
次回
今回はCSSで背景に画像を付ける方法についてご紹介しました。 次回は背景に画像を挿入した画像の繰り返しを設定する「background-repeat」プロパティについてご紹介します！ それでは、また次回もよろしくお願いします。
