カテゴリー:
CSS
閲覧数:811 配信日:2017-03-23 04:12
background-size:cover
ビューポート全体をカバーするが、使用場面は限られる
・「htmlタグ」や「bodyタグ」以外の要素で使用すると、画面一杯に表示することは出来ない
body {
/* 画像ファイルの指定 */
background-image: url(images/background-photo.jpg);
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #464646;
}