[初めてのｗｅｂサイト作成レッスン12]
背景画像の指定と背景色のｸﾞﾗﾃﾞｰｼｮﾝ方法

🌹レッスン12🌹

背景画像の指定と背景色のグラデーション方法

1. 背景に画像を指定する方法

背景に画像を指定するには、background-imageプロパティを使用します。

画像ファイルには、jpeg（写真など）gif（ロゴやマークなど）png（画像など）の形式があり、用途に合わせて使い分けると良いでしょう！

お好みの画像を一枚用意してください。（私は自分でエクセルで描いた、サイズがwidth1000pxで夜空をpng形式で用意しました。)

【ＨＴＭＬ】

そしてレッスン11のcontentsの最終形を少し編集して使います。

urlの(imgは画像があるフォルダ/yozora.pngは画像のファイル名)です。

【ＣＳＳ】

body {
	color: black;
	background-color: #ccc;
	background-image: url(img/yozora.png);
	}
h1{
	color: black;
	font-family: "Impact","Meiryo","游明朝";
	font-size: 40px;
	text-align: center;
	background-color: navy;
	padding: 10px;
	width: 40%;
	}

ブラウザで確認すると、この様に表示されます。

【説明】

薄いグレーの線はコンテンツの枠で、縦に２本白い太線がありますが、これは画像の枠です。

何も指定していないと、ｒｅｐｅａｔ状態となり、画像は縦横方向に繰り返し表示されます。

このままでは、イケてないのでＣＳＳで背景画像の指定をしていきましょう！

1-1.背景画像の並び方の指定は、ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔプロパティを使用します。

値には、

【ＣＳＳ】

body {
	color: black;
	background-color: #ccc;
	background-image: url(img/yozora.png)
	background-repeat: no-repeat;
	}

値をｒｅｐｅａｔ-ｘにしてみます。

background-repeat: repeat-x;

横方向に繰り返すので、ｒｅｐｅａｔと見た目は同じです。

値をｒｅｐｅａｔ-ｙにしてみます。

background-repeat: repeat-y;

縦方向に繰り返すので、ｎｏ－ｒｅｐｅａｔと見た目は同じです。

1-2.背景画像の位置の指定は、ｂａｃｋｇｒｏｕｎｄ－ｐｏｓｉｔｉｏｎプロパティを使用します。

値には、

　現在の値はｃｅｎｔｅｒになっているのでｌｅｆｔにしてみます。

background-position: left;

値をｒｉｇｈｔにしてみます。

background-position: right;

見栄えを良くするために、値をｃｅｎｔｅｒにし、コンテンツの幅を変えてみました。

🌻現在はテキストがちょうど画面に収まる文字数となっていますが増えてくると背景画像からこのように、テキストがはみ出してしまいます。

背景画像を固定する指定は、ｂａｃｋｇｒｏｕｎｄ－ａｔｔａｃｈｍｅｎｔプロパティを使用します。

値には、

値をｆｉｘｅｄにしてみます。

background-attachment: fixed;

【ＣＳＳ】

body {
	color: #000;
	background-image: url(img/yozora.png);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	margin: auto;
	padding: 0;
	}

背景画像は固定され、テキストのみスクロールします。

2. 背景色のグラデーション方法

当サイトでも背景色をグラデーションにしています。

私が使用しているブラウザで確認できている方法をご紹介します。

（パソコンはGoogle Chromeを使用しています。）

【ＣＳＳ】

body{
	color: #000;
/*Chromeの場合*/

	background: -webkit-linear-gradient
(top left,#fff 0%,#888 75%);
	width: 100%;
	margin: auto;
	padding: 0;
	}

左上（ホワイト）から右下（グレー）にかけて、グラデーションになりました。

残念ながら、背景グラデーションと背景画像は同時に指定しても出来なかったので、背景画像は、コンテンツ内のバックグラウンドにしてみました。

【ＣＳＳ】

#contents{
	background-image: url(img/yozora.png);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	border: solid gray 1px;
	margin: auto;
	padding: 10px;
	}

上記の画像のようになったかな？

★まとめ

いかがでしたか？「背景」を変えると、イメージが変わり見栄えが良くなったりしますよね～

色を変えてみたり、画像を変えてみたりすると、また違ったイメージがＣＳＳ３では、作ることができます。

お好みで試してみてくださいね(#^.^#)

当サイトでは説明するのに画像を多く使うため、背景画像は設置していませんが、背景色のグラデーション指定をしています。

次回レッスン13は、「円形グラデーションの指定とスマホならどう表示されるか確認する方法」をアップロードする予定です！

See you again Take care
(^.^/)))~~~bye!!