サイト背景画像がＰＣ画面で寸足らずでもＣＳＳでフィットする方法

Sirius.customize

TOP

サイトコンテンツの追加がございます

タイトルに沿う説明ではありますが、以下のカスタマイズ手法を追加した場合、
サイト背景画像が、スクロールの指示を受け付けずに自動で固定化します

つまり、サイト背景はスクロールしても動かない...通常これでいいんだと思いますが?

言い回しが、理解不能でしょう
すみません、親サイトと同じこと言うことになるんで2重コンテンツ
つまり、背景画像の固定化ができてしまうということです
もう言いません

では、タイトルに合わせお話を進めます

シリウスの背景にデザインか、フォト画像を入れ込んでサイトを見てみると横サイズが
不足しているのでしょうか、寸足らずとなることもございます

横サイズが（不足）寸足らですと、右スペースが開いてしまうのですね

対応としては、画像を再編集で拡張すればよいのですが、何せ大型画面なので調整も面倒

また、再編集による画質の劣化も気になるところ

そんな場合は、 class指定とＣＳＳ指定によりピシャリと自動でサイズが調整されるよう
改変してみましょう

画像の寸足らず例

指定すると自動で画面に合わせ拡張され適合します

事前説明

今回の指定では、画面サイズがレスポンシブ化された際、背景画像も
レイアウトが自動縮小しますが、

コンテンツか何かしらの影響でスマートフォンサイズではフォントが見ずらい
という事態も考えられます

対応策としては、スマートフォンではノンカスタマイズの白台紙に戻すとか
フォントが見やすい画像に切り替えるよいう方法もあります
それらのカスタマイズに関しては、巻末の関連記事でご確認ください

作業に難易はございません
以下を実行するだけ....

カテゴリ　エントリでも反映させるには、ＨＴＭＬテンプレートで、
class指定を書き入れます

<body>の直下に以下コードを貼り付け

スタイルシート内に以下コードを貼り付け

.background {

width:auto;
height: auto;
z-index: -19;
background: url(./img/1agoemon123.png);
background-repeat: no-repeat;
background-position: center center;

position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}

ここまで

念押しで読んでください

ＣＳＳ内の
background: url(./img/1agoemon123.png);ここですね
シリウスで読み込んである背景の画像コードに書き換えてください