CSSはオフセットされていますが、全幅を保持します

私は1234pxになると画面を塗りつぶす背景を持っています。背景画像を少し左に配置したいと思っています。このようにオフセットする： -CSSはオフセットされていますが、全幅を保持します

background-position: right 20px bottom 40px;

バックグラウンドを押している場所を空白にします。これを解決する方法はありますか？ここに私のCSSクラスがある： -

.full-background{ 
    height:100vh; 
    width:100%; 
      background: no-repeat; 
background-position: bottom center; 
background-origin: content-box; 
background-size: cover; 
background-image: url('assets/img/background.png'); 
min-width:100%; 
position:relative; 
    }

出典

2016-12-06 Gaz Smith

のように最初にHTTPS（[バックグラウンド位置]のために使用する構文を確認してください。 //developer.mozilla.org/en/docs/Web/CSS/background-position）（上のコードで使用したものは間違っています）より大きいイメージを使用することをお勧めします。これはmibileビューの '-20px -40px'、デスクトップは '0 0'です。 – skobaljic

これを解決する手段はないと私は考えています。これは、表紙が常に1次元（幅または高さ）で画面に収まるサイズになるため、移動すると常に空白が生成されるためです。私はあなたができると思う唯一のことは、メディアクエリを使用し、それが望むように配置されている別の画像を使用することです – Pete

あなたは 'カバー'の代わりに105〜110％にバックグラウンドサイズを増やすことができます。 –

あなたは擬似要素を使用することができ、この

.bkg { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 
.bkg::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -10%; 
 
    top: -10%; 
 
    width: 120%; 
 
    height: 120%; 
 
    background-image: url(http://lorempixel.com/500/400/nature/1); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
@media screen and (min-width: 900px) { /* add your min-width here */ 
 
    .bkg::after { 
 
    left: calc(-10% + 20px); 
 
    top: calc(-10% + 40px); 
 
    } 
 
}

<div class="bkg"></div>

出典

2016-12-06 16:54:37 LGSon

CSSはオフセットされていますが、全幅を保持します

答えて

関連する問題