2015年8月アーカイブ

個人的メモです。

例えば、固定幅中央揃えのボックスに対して、横幅100%の背景をつけるとき、背景用のdiv要素にコンテンツのdiv要素を入れ子にするのが一般的なのですが、これをひとつのdiv要素で実現できるかどうか、という問題です。

CSSコード

div{
    background-image:url(img1.jpg),url(img2.jpg);
    background-size:900px auto,auto;
    background-position:center 0,0 0;
    background-repeat:no-repeat,repeat;
    padding:0 calc(50vw - 900px/2);
}

なるほどー。clac()ファンクションで自動的にpaddingを算出すればよいのですねー。backgroundは複数指定でもよいですし、横幅が固定(px指定)であれば画像をひとまとめにして作ってもよいですね。古いブラウザには対応していない書き方ですが、最近は1カラムのサイトも多いのでこういうのは使えそうですね。勉強になりました!