ずっと使っていた木目調の背景に飽きたので、いろいろと物色。
シームレスなテクスチャを探していたけど、なかなかピンとくるのがない・・・
「写真にしてみたら？」というアドバイスを頂きましたが、
背景を写真にしてるサイトによくあるパターンで
意図しないディスプレイサイズで見ると、変な継ぎ目が出てたりして・・・
あんな感じになると嫌だなーとおもって躊躇してましたが
適当に写真選んで試してみました。
まぁ悪くはないかもしれないｗ
備忘録的に書くと、
- 自分が使っている27インチのモニター（2,560 x 1,440）に合わせてイメージをトリミング。
- 変なリピートは嫌なので no-repeatで繰り返さないよう指定
- 長いエントリーでスクロールすると破綻するので、fixedでスクロールしない設定
- 画像のポジションは中央指定
/*背景↓*/ background-image:url(i/1.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; /*背景↑*/
古いブラウザーによって
もしくは自分が使っている以上のディスプレイサイズだと
表示が破綻しそうな気がしますが、まぁそんなには多くは無いケースでしょう。
今回はとりあえず選んだ画像なので
ブラウザーのウインドウを、縮めたり広げたりしても違和感なく
かつ内容とケンカしないような画像を選別して、入れ替えてみたいと思います。
PS:そもそもiPhoneやiPadでみると、背景見えないので無駄設定ですねｗ
SBクリエイティブ
コメント