HTMLのボディ背景のスケーラブルイメージ

どのようにして、HTMLのボディー背景イメージをスケーラブルに正しく設定できますか？私はChrome拡張機能を使用しているため、モバイルデバイス（？）を心配する必要はありません。現在のHTMLページは非常に単純です。画像を表示するだけで済みます（最終的にはフォルダからランダムな画像を表示しますが、ハードコードされたイメージで十分です）。画面サイズの異なるさまざまな端末（タブレット、ノートパソコン、パソコンの外部ディスプレイなど）でChromeを使用して画質を維持する場合、画像を拡大するにはどうすればよいですか？HTMLのボディ背景のスケーラブルイメージ

<html> 
    <head> 
     <title> New Tab </title> 
    </head> 
    <style> 
    body { 
     background-image:url('indexImage.png'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-position: center; 
    } 
    </style> 

    <body> 
    </body> 
</html>

出典

2016-12-27 babsndeep

あなたは 'スケーラブル' によって何を意味するかを説明していただけますか？ –

絶対に、@WaisKamal。たとえば、スケール可能とは、最初に提供されたイメージよりも小さいまたは大きいスクリーンでユーザーがエクステンションを開いた場合、イメージ全体が保持されることを保証する方法と、イメージ全体がブラウザウィンドウ。 – babsndeep

操作のしやすさのために、背景の代わりに画像レイヤーを使用することができます。レイヤーの 'z-index'プロパティを最低に設定し、CSSを' width：100％;高さ：自動。 –

私はあなたがbackground-size: contain;やbackground-size: cover;を試してみたいと思います。

出典

2016-12-27 20:26:08

私が過去にこれをしなければならなかったとき、私は他のいくつかの検討事項に遭遇しました。そう、はい、それを満たすために、それを拡大縮小することができます。しかし、イメージの内容自体について考える必要があります。その抽象的なイメージの場合、ストレッチするのが良いかもしれませんが、それ以外の場合はうまくいかないかもしれません。

画像の歪みが気にならない場合は、HTMLとBODYの高さを100％に設定して、CSSの背景サイズを100％に設定することができます。like this fiddle

html, body { 
     height: 100%; 
     width: 100%; 
} 

body { 
     background-image:url('http://columbiascbestnewhomes.com/images/brunson-plan.jpg'); 
     background-repeat:no-repeat; 
     background-size:100% 100%; 
     background-position: center; 
}

画像Iを検出し、画面幅に基づいて、各デバイスまたはスクリーンタイプの画像を有するようにCSSメディアクエリを使用する延伸されていないことは問題でない場合。次に、画像を動的に設定し、上記の背景サイズのCSSを使用します。

出典

2016-12-27 20:28:39 tamak

あなたのスタイルでbackground-sizeを使用し、値をパーセントで設定できます。このように：

<style> 
    body { 
     height: 100%; 
     width: 100%;    
     background-image:url('aa.gif'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-position: center; 
     background-size: 80% 80%; 
    } 
</style>

出典

2016-12-27 20:37:30

私は自分のサイトへの私のログインページに似たようなことをしました。以下は、私がしたことの簡単な概要です。それが役立つかどうかを知らせてください。

私は、ボディを行う代わりに空のdivを使用する方が少しうまく流れていることがわかりました。

@{ 
    Random random = new Random(); 
    int randomNumber = random.Next(0, 5); 
    string background = "Images/bg-" + randomNumber + ".jpeg"; 
} 


<div id="background" style="background-image: url('@background');"></div>

CSS：

html{ 
    height:100% 
    margin:0; 
    padding:0; 
} 
body{ 
    min-height:100% 
    margin:0; 
} 
#background{ 
    background-color:#1f212e; 
    background-position:center; 
    background-size:cover; 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

出典

2016-12-27 20:41:36 Sicae

HTMLのボディ背景のスケーラブルイメージ

答えて

関連する問題