0827 CSS: ブラウザサイズに関係なく背景画像が全面に広がるレイアウト

背景画像の指定

1600px×900pxの切り抜き画像を作成し、PNGで保存しておく。

PNG画像に圧縮をかけて少しでもファイルサイズを軽くしておく。

スタイルシートの指定をする。

body{

background-image: url(xxx.png);

/* 常に転地左右の中央に表示 */

background-position: center center;

/* 繰り返し表示をしない */

background-repeat: no-repeat;

/* コンテンツの高さ＞画像の高さの時、画像を固定 */

background-attachment: fixed;

/* 表示するコンテナの大きさに基づいて画像を調整 */

background-size: cover;

/* 画像が読み込まれるまで表示される背景色 */

background-color: #464646;

}

コンテンツを半透明にする

上のコードに対してcontainerを作成し

background-color: rgba(255, 255, 255, 0.7);

の指定をする。RGBの値＋透明度。

こんな感じになりました。