web-dev-qa-db-ja.com

bootstrapのc​​ss3でレスポンシブ背景画像を使用する方法

HTMLタグは使いたくありません。これは私のCSSです。 bootstrap 3.0を使用しています。

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

100％ズームではこれで問題ありません。しかし、約180％でズームインすると、画像が上下から短くなるので、CSSのトリックが必要です。

htmlcsscss3twitter-bootstrapbackground-image
46
Faizan

画像の背景全体については、これを確認してください。

html { 
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;
}
69
fiskolin

background-size: 100% 100%;を使用する必要があります

デモ

デモ2 （伸びない、これがあなたがしていることです）

説明：X AS WELL AS Yに設定する100% 100%を使用する必要があります。Xパラメーターのみに100%を設定するため、背景縦に伸びません。

それでも、画像は伸びてしまい、反応しなくなります。backgroundを比例的に伸ばしたい場合は、background-size: cover;を探すことができますが、IEは問題を引き起こしますここではCSS3プロパティですが、はい、CSS3 Pieをポリフィルとして使用できます。また、coverを使用すると、画像がトリミングされます。

17
Mr. Alien

私はこれを見つけました：

フル

Bootstrap 3つのWebサイト用の使いやすいフルページ画像背景テンプレート

http://startbootstrap.com/template-overviews/full/

または

メインdivコンテナで使用：

html

<div class="container-fluid full">


</div>

css：

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}
9
raduken

これをチェックして、

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
4
Levent Divilioglu

レスポンシブでユーザーフレンドリーな背景を設定する

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
1
pradip kor

これを試して：

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
1
user6060331

ファイルパス'images/ip-box.png'は、CSS ファイルが画像フォルダーと同じレベルであることを意味します。

「images」フォルダーと「css」フォルダーが「index.html」ファイルと同じレベルにある方がおそらく一般的です。

その場合、cssファイルがそれぞれのフォルダーの1レベル下にある場合、cssファイルで指定されているip-box.jpgへのパスは次のようになります。'../images/ip-box.png'

1
wkille