簡単に。
どういうことか
高さ固定、幅はレスポンシブな枠がある。そこを画像で埋めたい。
単純に画像を隙間なく配置するならbackground-size:coverとかでいいんだけど、画像自体のサイズを変えたくない場合がある。商品画像だった場合、幅によりデカくなったりはみ出たりとかすると困る。
そうすると画像のサイズを固定することになるんで、表示領域とブラウザ幅、また画像によって隙間が生まれてしまうケースが出る。そういうのを防ぐにはどうしたらいいかという話。
参考
文字で説明するとあれなんで参考。
設置イメージだけでなくて、現環境に合わせた最適解はタカミがやってる。
Just a moment...
www.takami-labo.com
ベタの背景じゃなく雰囲気が出せてるのと、商品が置いてある感をブラウザ幅によらずきちんとズレることなく配置できてるのがいいですね。表示サイズに縛りを設けるなら、手間をかけたくないなら、こうするのが一番でしょうねと。
やっていく
準備するのはメインの画像と隙間を埋める用の画像の2つ。
隙間を埋める用はリピートさせることでどんなサイズにも対応できますね、ということになる。
で、こうなる。
.img{
width: 100%;
height: 100vh;
background: url(img/topimg.jpg) center no-repeat, url(img/topimg_bg.jpg) center repeat-x;
}注意点
当然ながら2つの画像を繋げたときに自然になってないといけないんで、ほぼベタ塗りみたいな、シンプルな背景のものでやっていく事が前提になる。
端から端までにぎやかなデザインでやりたいなら向かない。
まとめ
ベースがシンプルすぎるんで、真似ると絶対にバレるでしょってリスク。
下世話な話だけど、扱う際は上手いこと自分のものにしてやっていきたいですね。
コメント