background-size：cover;プロパティ

Question

背景イメージが変化するたびに、私はそれを体を覆う必要があります。私はbackground-size: coverを使用していますが、動作していないようです。

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s; 

、ここでは、画像を変更しているjQueryの：画像がアレイ（オブジェクト）に格納され

$("body").css("background", objects[newNum].img); 

。

CodePen：http://codepen.io/Chantun/pen/WxXaGy?editors=0010

Answer 1

あなたは、背景画像に背景のあなたの用法を変更する必要があります。バックグラウンドサイズと競合するためです。

だからあなたのCSSのためには、次のようになります。

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background-image: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s; 

そして、あなたのJSのために、それは次のようになります。

$("body").css("background-image", objects[newNum].img); 

Answer 2

バックグラウンドカバーは、右の仕事です。デフォルトボディーの高さ：auto。身体には身長：100vhを使用してください。余白をパディングトップに変更します。

body { 
    min-height: 100vh; 
    padding-top: 60px; 
} 

Codepen

Answer 3

ジャストヘッドアップ！

background-attachment: fixedとbackground-size: coverはお互いにうまく遊びません！ :(

彼らはここに衝突方法と理由に関するより詳細な説明：https://stackoverflow.com/a/23811091

編集：！またあなたのbackground-attachment: fixedがスペルミスさを:)

Answer 4

1が作るんの代わりに2トンの者を持っているあなたのcodepenにbackground-attachmentを変更します私はあなたがそれを望むと思うように働く。また、背景ルールを簡略化して次のように組み合わせることもできます。

background: #000 url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg) center center/cover no-repeat; 
background-attachment: fixed;