ブートストラップレスポンスの背景画像

Question

ブートストラップを使用して、訪問者が表示する画像にバックグラウンドの画像を持つdivホルダを作成するにはどうすればよいですか？画像の高さと幅は固定されています。画面が小さければ、x、yがオーバーフローしないようにサイズを変更する必要があります。

Answer 1

あなたはこのようbackground-sizeを使用することができます。

div.someclass { 
    background-size: cover; 
} 

いくつかのテクニックを示す@Chris Coyierから良い記事があります：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

私は、ブートストラップでは非常に経験豊富ではないんだけど、私にはそのようなものが存在しないと思います特徴。自分の背景をカスタマイズするための純粋なCSSまたはLESSファイルである独自の "Bootstrap Theme"を作成することをお勧めします。

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png); 
    background-size: cover; 
} 

このコードは、両方の次元で、あなたの背景画像を引き伸ばしますが、画面比が画像比率と同じである場合を除き、それは、画像の一部をカット：

あなたは、単に使用することができます。

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed; 
    background-size: cover; 
} 

Answer 3

これが私の仕事：

body{ 
     background-image: url('../url') ; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     height:100%; 

    } 

Answer 4

まず、背景画像のために：

div.someclass{ 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

それはの大きさに応じてフィットします。すなわちこれは、あなたの背景画像が応答になりますページが表示される表示。

div.someclass{ 
margin-top:5%; 
} 

変更上記の5％：

第二に、任意のデバイス上からメインフォームの内容に適切なマージンを維持するためには、あなただけの上にメインのコンテンツのための相対的なマージンを作成したdiv要素を与えることですあなたの要件に応じて。

Answer 5

body { 
    background="imagename.jpg"; 
    }