TOP

背景をノンスクロール指定

シリウスのデフォルト機能か、当サイトの背景組み込みコンテンツで
サイト背景に画像をを挿入することは容易にできますね

 

さて、その背景画像はサイトのスクロールに合わせて上部へ移動したほうが
よいのでしょうか?

 

多くのサイトを見てみますと、デザイン以外のフォト画像の場合、
ほとんどノンスクロールかと理解していますが、?

 

サイト背景をスクロールしない、というCSS指定をすれば、記事だけが
動いても背景は動かず...という形態に

 

そんな仕組みはレスポンシブ構造でも簡単にできます

 

 

ここでご注意です

 

当サイトの関連ページ
サイト背景画像がPC画面で寸足らずでもCSSでフィットする方法
をCSSに入れている場合は、コードの固定記述が含まれているので
今回の解説は必要ありません

 

 

あくまで通常のレスポンシブテンプレートを使用する場合に限ります

 

ノンスクロールを指定するコードをスタイルシートに入れ込みます
background-attachment:fixed

 

 

ここへ到達
==================================================
基本スタイル
==================================================
*/

 

 

 

body {
background-color: #ebebeb;
border-top: 4px solid #999999;
color: #333333;
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
}

 

 

これで終わり,,,desu

 

 

背景をノンスクロール指定
サイト背景のカスタマイズまとめ
トップページ

関連ページ

記事のデフォルト背景の変更方法
シリウスの記事背景はCSS指定でデフォルトは白を指定していますが、背景の種類により各種合わせてカスタマイズが可能です
サイト背景画像がPC画面で寸足らずでもCSSでフィットする方法
シリウスにサイト背景を入れたものの、寸足らずでスペースが開いてしまう。画像の拡張では、画質の劣化を招く。そんな場合はCSS指定でフィットする方法がございます
サイト背景をデバイス別に切り替える方法
シリウスのレスポンシブサイトの背景をPCとスマートフォンではフォントの認識具合により切り替えることも必要。では、切り替える方法をご案内します