![http://ri-mode.com/rainbow/2013/04/21/css_fullscreen_background/](https://cdn-ak-scissors.b.st-hatena.com/image/square/36ede111178380205396f3a90d9a3f531e82467b/height=288;version=1;width=512/https%3A%2F%2Fri-mode.com%2Frainbow%2Ffiles%2Fcss018.jpg)
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
今回は、Photoshopなどの画像編集ソフトを使っている方が、知らず知らずのうちに、仕事を遅くしてしまっているかもしれないポイントと、その改善方法を紹介いたします。 普段、画像編集作業において、画面の「拡大率」について意識することってありますか? もしかしたら、意識していないばかりに、多くの時間をとられ、無用な残業をするハメになっているかもしれません。 実は、作業時にこの「拡大率」を意識するだけで、業務を効率化することができるって知ってました? 丁寧な仕事をしようとするほど、ハマりがちなこの「拡大率」の落とし穴。 今回は、カメラマン坂田と、デザイナー山本の二人でご紹介します! とある日。 夜11時を過ぎた頃・・・ ふーっ・・・ 書類を整理していたら遅くなってしまった・・・ おっと・・・!もうこんな時間・・・帰るか・・・。 ・・・あれ? PCの明かりが点いてる・・・。 誰かいるのかな? 薄
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか?SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト! 2014年7月3日 追記:SVGスプライトの書き方について修正&追記しました。 SVGってなに? SVG(Scalable Vector Graphics)はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
These lovely water-colorful dots will make your designs pop...
無料の写真素材・AI画像素材「ぱくたそ」 会員登録不要、ダウンロード制限なし。高品質のフリー素材を手軽に。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く