背景画像を動作しないようにするCSS指定
サイト背景の全体画像化が完了しましたら、次は画面をスクロールしてもノンストップ
動かなくする指定をしましょう
この指定をやらないと、スクロールに従い背景が上に移動してしまい、残された
記事だけ見ても、超いまいち不思議なサイトになってしまいます
指定手順は、超簡単
背景を動かさないという指示コードをスタイルシートでCSS指定するだけ
こちらがそのコードです
background-attachment:fixed
どこに取り付けるか?
まずは、スタイルシート開きまして、基本スタイルの下、body項目へ到達
例記載で色違いコードを確認してください
==================================================
基本スタイル
==================================================
*/
body {
background-color: #fff;
border-top: 4px solid #fff;
color: #FFF;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
background-attachment:fixed 追加した例
}
以上で完了です
ですが、
これで、終わりません
上記、の指定が環境により反映されない場合があるのです
その場合は、次のリンクページに詳細を追記しております
サイト背景画像がPC画面で寸足らずでもCSSでフィットする方法
背景画像をスクロールオンでもノンストップ指定するCSSコード
トップページ