簡単に。
どういうことか
高さ固定、幅はレスポンシブな枠がある。そこを画像で埋めたい。
単純に画像を隙間なく配置するならbackground-size:coverとかでいいんだけど、画像自体のサイズを変えたくない場合がある。商品画像だった場合、幅によりデカくなったりはみ出たりとかすると困る。
そうすると画像のサイズを固定することになるんで、表示領域とブラウザ幅、また画像によって隙間が生まれてしまうケースが出る。そういうのを防ぐにはどうしたらいいかという話。
参考
文字で説明するとあれなんで参考。
設置イメージだけでなくて、現環境に合わせた最適解はタカミがやってる。
【公式】タカミスキンピール（角質美容水）様々な肌悩みに１本でアプローチする青い瓶。
タカミ公式サイトのタカミスキンピール紹介ページです。美容皮膚の現場での経験から肌の生まれ変わりに着目。肌荒れや毛穴の目立ち・乾燥などの様々な肌トラブルにアプローチ、手応えを感じていただけます。製品特徴、全成分、効果を感じやすい正しい使い方を...
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つの画像を繋げたときに自然になってないといけないんで、ほぼベタ塗りみたいな、シンプルな背景のものでやっていく事が前提になる。
端から端までにぎやかなデザインでやりたいなら向かない。
まとめ
ベースがシンプルすぎるんで、真似ると絶対にバレるでしょってリスク。
下世話な話だけど、扱う際は上手いこと自分のものにしてやっていきたいですね。
コメント