電脳世界の空間的平面設計

現在WEBサイト制作の学校に通い勉強しています。その覚書きです。

サイトの背景を画像にする

画像の大きさは1400×700が良いらしい

 

モニターの画面比率は16:9だが

ブラウザバーなどの高さを考えると16:8ぐらいになる

2:1ですね。

 

画像がそのままだとデータ重いです。

グーグルは重い画像データを表示させるサイトを弾くそうなので

画像を軽くする必要があります。

以下のサイトが便利

tinypng.com

 

僕の画像は71%軽くなりました。

 

body {
background-image: url(img/curry2.png);
/*画像を常に天地左右の中央に配置*/
background-position: center center;
/*画像を繰り返し表示しない*/
background-repeat: no-repeat;
/*コンテンツの高さが画像の高さより大きい時、動かないように固定*/
background-attachment: fixed;
/*表示するコンテナの大きさに基づいて、背景画像を調整*/
background-size: cover;
/*背景画像が読み込まれる前に表示される背景のカラー*/
background-color: #464646;

}