背景変更

ずっと使っていた木目調の背景に飽きたので、いろいろと物色。
シームレスなテクスチャを探していたけど、なかなかピンとくるのがない・・・

「写真にしてみたら?」というアドバイスを頂きましたが、

背景を写真にしてるサイトによくあるパターンで
意図しないディスプレイサイズで見ると、変な継ぎ目が出てたりして・・・

あんな感じになると嫌だなーとおもって躊躇してましたが
適当に写真選んで試してみました。

スクショ1

まぁ悪くはないかもしれないw

備忘録的に書くと、

  • 自分が使っている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でみると、背景見えないので無駄設定ですねw

コメント