2016-05-18 10 views
1

現在のところ、ブラウザがモニタのサイズの半分であれば、幅に合わせて背景を縮小し、高さと下端をカットします。私は、それは代わりに、高さを維持したいページ全体を充填し、アスペクト比を維持するが、単に写真を中心と写真の側面をカット、私の現在のCSSは、任意のヘルプだけブートストラップCSS:センターバックグラウンド、フルハイト、カットオフ幅

body{ 
    background-image: url("/background1.jpg"); 
    background-size: 100%; 
    background-repeat:no-repeat; 
    display: compact; 
} 

あると思いますどのようにこれを行うには素晴らしいでしょう、ありがとう

+1

'ディスプレイが何である以下のサンプルを実行している参照してください。コンパクト? – Chris

+0

[CSSで背景イメージのサイズを設定しますか?](http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css) –

答えて

1

background-size: coverを追加すると、縦横比を保持する必要があります。

background-position: center;を追加すると、画像が中央に保存されます。

divのルールを交換し、あなたのbodyにそれを置く - 私は、サンプルコードについてはこちらをdivを使用)

div { 
 
    background-image: url("http://placehold.it/1000/1000"); 
 
    /* Resizes image to fill div; retains aspect ratio. */ 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    min-height: 2000px; 
 
}
<div> 
 
    Lorem Ipsum 
 
</div>

+0

ありがとうございました – Fuledbyramen

+0

私はうれしいです私は助けることができた。 – ochi

1
background-size: cover; 

あなたが必要なものを行う必要があります。非常にエレガントにクロッピング/スケーリングを処理します。そのルールに

1

使用background-size: auto 100%;:(background-sizeで)

body { 
    background: url("/background1.jpg") center center no-repeat; 
    background-size: auto 100%; 
} 

最初のパラメータは、幅、画像の第2の高さです。ルールのように1つのパラメータしかない場合、ブラウザは幅とみなして高さをautoに設定します。私のバージョンはあなたに完全な高さを与え、自動的に幅を調整する必要があります(そしてイメージを中央に置く)

関連する問題