私はどのスクリーンにも、すべてのブラウザに合った背景イメージのための最善の解決策であると思っています。また、私は大部分のテクニックが画像を少し切り取っていることに気付きました。 私はこれを行うための技術がたくさんあることを知っていますが、私はあなたの意見で最高であることを知りたいです。 ありがとう!CSS完全なフルスクリーンイメージのバックグラウンド
11
A
答えて
23
このpost from CSS-tricks.comはフルスクリーンの背景画像のさまざまな手法をカバーしており、IEの旧バージョンのフォールバックを含んでいます(私はIEの修正をテストしていません)。
私は、一般的にCSS3のメソッドを使用して、古いブラウザのサポートを心配する必要はありません。
html {
background: url(http://lorempixum.com/1440/900/sports)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
+0
古いですが、私は知っていますが、ブラウザのサイズが変更されない良い代替品がありますか?私はちょうどイメージに最小の高さを与えることができればと願っています –
0
は、bodyタグの内側にこれを追加します。
<img src="img/beach.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg
関連する問題
- 1. cssの完全な高さ?
- 2. 完全なCSSで結晶レポートの完全なHTMLコードを取得
- 3. UIImageView:フルスクリーンイメージ
- 4. 完全なCSSの3Dページ - カメラの実装
- 5. の完全なまたは完全なハッシュに近いアドレス
- 6. CSSで完全な相対パスに変更
- 7. OperaがCSSを完全にロードしていない
- 8. 完全なPython Noob
- 9. 完全なCONNECTIVITY_SERVICEテスト
- 10. 完全なHttpライブラリ
- 11. NodeJsの完全なチャットソリューション
- 12. FXMLの完全なリファレンス?
- 13. ピクセルの完全な衝突?
- 14. 完全なGWTベースのサインアップシステム
- 15. 不完全な型のC++
- 16. 完全なJFXPanelの画像
- 17. FSCopyURLForVolumeの完全なURL
- 18. ブーストファイルシステムの完全な交換
- 19. JqueryスクロールでJqueryフルスクリーンイメージ
- 20. 仮想コンストラクタイディオム - 虚偽または完全な完全フォールシス
- 21. automapper不完全なドキュメント
- 22. 検索完全なデータベース
- 23. scapyで完全なHTTP GET
- 24. 不完全なフォームプロンプト - Android
- 25. mvn -e完全なスタックトレース?
- 26. SVN:強制完全な
- 27. エラー:不完全なテンプレートタイプ
- 28. 完全なページ<iframe>
- 29. Javaで完全なLaTeXパーサー
- 30. ツイスト、繰延完全なトレースバック
を私は本当にすべての解決策をキャッチしているとは思わないでください。あなたのソリューションは、イメージがどのように見え、どのように適用されているかに大きく依存します。例えば、多くの背景画像は、コンテンツの領域の幅を画像の中心に大きな隙間を残す。他の背景画像はコンテンツ領域に表示されます。いくつか繰り返します。背景画像にはいくつかのテクニックがありますが、デザインによって異なります。 – Jrod
http://css-tricks.com/3458-perfect-full-page-background-image/ - jqueryメソッド - おそらく最良の解決策です。 – easwee