私はbgImageという適切なブートストラップの背景イメージをどのように得ることができるか質問できます。現在、私の背景は、ウィンドウのサイズが変更されたときのサイズには適合しません。ブーストラップの背景イメージ

<html> 
    <head> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="BGImage"> 
      <div class="container" id="tabcontainer"> 
       <div class="row"> 
       //All the content i.e text field, text box are inside 
       </div>  
      </div> 
     </div> 
    </body> 
</html>

のstyle.css

<body> 
    background: none; 
</body> 
#BGImage { 
    background: url(../images/1.jpg) no-repeat scroll 0 0 transparent;  
    background-repeat:no-repeat; 
    -webkit-background-size:cover;  
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
    background-position:center; 
    height:850px; 
}

出典

2016-06-26 xodebox95

多分：[ブートストラップのcss3でレスポンシブな背景イメージを使用する方法]（http://stackoverflow.com/questions/18612651/how-to-use-responsive-background-image-in-css3-in-ブートストラップ） – Martin

あなたのコードは正しいですが、あなたはもう一つのことをすべき

#BGImage { 
    background-size:100% auto; 
}

出典

2016-06-26 11:44:01 frnt

こんにちは、これは動作します:)しかし、私はそれをサイズ変更するときに、まだいくつかのスペースがあります。空白を削除する方法はありますか？ – xodebox95

これは、あなたが追加したマージンのためかもしれません。 – frnt

それはあなたのスタイルのインラインを入れてみましたので、これは、問題への直接の答えではないかもしれません。これまでのところうまく動作します。

これは実装に使用する簡単なコードです。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css\bootstrap.css" media="screen" title="no title" charset="utf-8"> 
    <style media="screen"> 
     #BGImage { 
     background: url('image/1.jpg') no-repeat scroll 0 0 transparent; 
      background-repeat:no-repeat; 
      -webkit-background-size:cover; 
      -moz-background-size:cover; 
      -o-background-size:cover; 
      background-size:cover; 
      background-position:center; 
      height:850px; 
     } 
    </style> 
    <script type="text/javascript" src="jquery-1.12.2.js"></script> 
    <script type="text/javascript" src="bootstrap-3.3.6-dist\js\bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div id="BGImage"> 
     <div class="container" id="tabcontainer"> 
     <div class="row"> 
      //All the content i.e text field, text box are inside 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

たぶん、ここから、それはあなたがあなたがあなたのイメージに850ピクセルの高さを与えた問題

出典

2016-06-26 10:03:51 Fil

いいえ、動作しません。ウィンドウのサイズを変更すると画像の半分しか表示されない – xodebox95

親スタイルをチェックしてください。div＃BGImageに影響する可能性があります。 – Fil

現在の親スタイルが本文です。しかし、ボディには次のものしかありません。 body { \t margin-top：22px; \t背景：なし。 } – xodebox95

を把握に役立つことがあります。これは反応的なサイズではありません。スクリーン全体に合うように100％に変更してください。このようなもの：

高さ：100％;

これはうまくいきます。

出典

2016-06-26 10:19:14

@ xodebox95動作しましたか？ –

、これはこれにあなたの背景サイズを変更してみてください。

背景image(Like h1, p, button)にいくつかのコンテンツを使用して管理するためにpadding/marginを使用しますそれ。必要に応じて、モバイルとタブレット用のメディアクエリを使用できます。

出典

2017-04-14 09:02:25

ブーストラップの背景イメージ

のstyle.css

答えて

関連する問題