web-dev-qa-db-ja.com

ページに合わせてHTML5を使用した背景画像

1つの画像をWebサイトの完全な背景にしたい！とてもシンプルに聞こえますが、夢中になりました。ページに収まりません。

CSS

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

私はTwitter Bootstrap=も使用していますが、それがなければ、私はそれを正しく得ることができません！

任意の助けをいただければ幸いです。

編集：そして、レスポンシブ+モバイルデザインを作成しようとしているため、正確なピクセルを使用しませんでした。

なぜ彼らが質問に反対票を投じたのか分かりません！しかし、これは私がそれを解決した方法です！

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
html5css3twitter-bootstrapbackground-image
9
0bserver07

編集： [〜＃〜] demo [〜＃〜] を作成し、いくつかの不要なものを削除しました。これには、背景画像をウィンドウ化しないという利点があります。 [〜＃〜] demo [〜＃〜] は機能しますが、以下の引用コードほど広範囲にテストされていません。

私は最近、この正確なものが必要なプロジェクトに取り組みました。私は自分のプロジェクトファイルから投稿しているので、これを書いたのはチームメンバーだったので、この一部は不要かもしれません。

Htmlおよびbodyのプロパティを設定することから始めます。それから、bodyと呼ばれるroot divをbackgroundと呼びます。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

繰り返しますが、その一部は不要であると確信していますが、役立つことを願っています。

13
Corey Horn

これを行うには、プロパティbackground-attachment: fixed;を追加します

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

[〜＃〜] demo [〜＃〜]

ただし、ページのサイズと画像のサイズの比率が異なる場合、画像をウィンドウで切り取ることができることを知っておく必要があります。

編集

あなたにとって高さがより重要な場合は、パラメータbackround-sizeをcontaintに変更します。

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

デモを含む

6
WooCaSh

ImgをFlash（Microsoftプログラム）にインポートし、imgをVector IMG（Vector：高さおよび幅を変更しても品質に影響を与えない（それほど多くない）画像に変換してください。）ベクトルimgを調整した後（ img（現在のプラットフォームの解像度）を保存して、HTMLに適用します。特に、クロスプラットフォーミングによって異なる解像度のHTMLを使用する場合は、バックアップコピーを作成することをお勧めします。

0
StudenProg

ページの最初の要素の高さを設定する必要があります。

html, body { margin:0; height: 100%;}

詳細はこちら：

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona/

0
monteirobrena