CSS のみで画面いっぱいに背景画像 スクリプトを使わずに、CSSのみで画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 800 x 533 ピクセルですが、画面いっぱいに拡大表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像のサイズを大きくすれば軽減されます。画像の縦横比は維持されるので、ディスプレイの大きさによって変形する事はありません。 背景画像に position: fixed を指定すると、画像はページの中央に固定表示されるので、コンテンツが縦に長くなって、縦スクロールしても固定されたままになります。 position: absolute を指定すれば、スクロールと共に背景も一緒にスクロールしますが、その場合は画像の下端に注意する必要があります。 動作確認済みブラウザ Firefox 3.6 Safari 5 Chrome 5 O
ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。 HTML デモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。 <div><span>Cool Background</span></div> CSS まずは、美しいグラデーションのスタイルシートから。 グラデーションの設定は楕円(ellipse)状でボックスの一番遠い角に合わせて(farthest-corner)います。 div { position: fixed; width: 100%; height: 100%; background-image: -webk
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く