背景画像が拡大されているのはなぜですか？

私は1920 * 1080の背景画像を設定しようとしています。何らかの理由で画像が拡大されていて、切り取られています。背景画像が拡大されているのはなぜですか？

さらに、<navbar>に背景の上部を覆わないように設定する可能性があるかどうかを知りたいと思います。それを分けるチャンスはありますか？

これは私のCSSファイルの背景設定は次のとおりです。

body { 
    background: url(images/back.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

body, 
html { 
    font-family: 'Caveat Brush', cursive; 
    color: white; 
}

これはどのようにimage looks like on my browserです：

ありがとうございました。

出典

2017-02-14 Eyal Younger

'height：1920; width：1080px; '？ – WasteD

まだ同じ変更はありません –

これは、background-size：coverを使用しているためです。これは、画像を伸ばしたり、切り抜いたりしている間、html要素の幅と高さに合わせて背景画像を拡大/縮小します。は、ナビゲーションバーを考慮：あなたのhtmlでのナビゲーションバーを持っており、それは、例えば、は50pxのための所定の高さを持っている場合は自分の提案を応じて、いくつかの変更を行った後、あなたのCSS

出典

2017-02-14 10:05:27 d3orn

マージントップをボディに追加すると修正されません。代わりにパディングを使用し、背景位置：トップ50pxの中心と言うことができます。 –

ああええ、私は自分の答え – d3orn

を編集するので、background-sizeの代わりにどのコードを書いてください： –

に

body { 
    padding-top: 50px; 
    background-position: top 50px center; 
}

を追加し、ナビゲーションバー自体をパドリングで下がっています（画像が添付されます）。

HTMLのコードは、次のとおりです。

</head> 
    <body> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Eyal Younger </a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">HTML COURSE</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

CSSコード：

body { 

    padding-top: 50px; 
    background-position: top 50px center; 
    background: url(images/back.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: height: 1920 width: 1080px; 

} 

body, 
html { 

    font-family: 'Caveat Brush', cursive; 
    color:white;  
} 

h1 { 
    font-weight: 700; 
    font-size: 5em; 

} 

h3 { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-top: 5px; 
    margin-bottom: 10px; 


} 

#mainimg { 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    border: 8px double red; 
    box-shadow: 5px 5px 6px #353232; 

} 



.content { 
    padding: 6%; 
    text-align: center; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.9), 
       0px 8px 13px rgba(0,0,0,0.1), 
       0px 18px 23px rgba(0,0,0,0.1); 


}

enter image description here

出典

2017-02-14 10:26:08

がフル背景画像

body{ 
margin: 0; 
background:url('images/back.jpg') no-repeat fixed 0 -300px; 
background-size:100%;

出典

2017-02-14 10:45:06

うわーは確かにバックグラウンドからnavbarを分離します、ありがとう！しかし、背景画像の実際の比率を維持するために何かがありますか？ –

私は初心者ですので、私は完全にはわかりませんが、これがあなたが探しているものなのかどうかはわかりませんが、x軸とy軸に沿ってイメージを移動して、上記の投稿）もし私が多分ページのスクリーンショットを見ることができたら、何が起こっているのかをより良く知ることができるでしょう。 –

ブラウザへのリンクと、それが私の背景イメージの割合をどのように変えるかの例へのリンクです。 https://i.stack.imgur.com/5Y87Q.jpg –

のためにこれを試してみてくださいこれは私の背景イメージをズームする方法です。 How it looks like

出典

2017-02-14 13:27:55

背景画像が拡大されているのはなぜですか？

答えて

関連する問題