サイズの大きい画像を背景にする際のCSSテクニック:phpspot開発日誌
How to: CSS Large Background Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. サイズの大きい画像を背景にする際のCSSテクニック。 大きい背景画像を使っても、解像度の高いディスプレイだと次のように画像が切れてしまいます。 ということで、次のように、解像度の高いディスプレイでもOKなように作ろうという話。 この際、適切なCSSを設定する必要があって、その例も紹介されています。 更に全体の背景を画像にするような例も紹介されてます。 デモ用の圧縮パッケージも一括でダウンロード可能みたい。 関連エントリ 巨大な背景画像を使って
CSSで背景画像をリサイズするテクニック:phpspot開発日誌
How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では３種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する３つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のＣＳＳを適用。 p.thumb{ float:left; margin:.5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
