web-dev-qa-db-ja.com

Bootstrapレスポンシブ背景画像

ブートストラップを使用して、訪問者のディスプレイに合う画像を背景として持つdivホルダーを作成するにはどうすればよいですか？画像の高さと幅は固定されています。画面が小さい場合は、x、yオーバーフローが発生しないようにサイズを変更する必要があります。

css3twitter-bootstrapresponsive-design
18
kakuki

次のようにbackground-sizeを使用できます。

div.someclass {
  background-size: cover;
}

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

25
pzin

まず、背景画像の場合：

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の上部に相対的なマージンを与えることです。

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

要件に応じて上記の5％を変更します。

2
Pranav Pandey

Bootstrapの経験はあまりありませんが、そのような機能はないと思います。背景をカスタマイズするには、独自の「ブートストラップテーマ」、純粋なCSSまたはLESSファイルを作成することをお勧めします。

単に使用できます：

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;
}
1
kdani

これは私のために働いた：

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%;

    }
0
Deepak Shinde