完璧な3つの部分のCSSの背景

私はその中に任意の空きスペースと青色の背景があれば、画像の左側に中間色の緑色の背景を含むことを希望します。完璧な3つの部分のCSSの背景

これは私が今までに得たものです（画像に問題はありませんが、左右に別々の背景が2つあります;左側に色が緑色に変わり、200px（600px）のサイズでbmpに変わります）。高さ1と繰返しyは画像の右側に表示される場合もありますが、画像の左側のスペースがすべて覆われるわけではありません）。この画像では99％の場合で解決できる場合がありますが、その上で動作する割合画像...

<!DOCTYPE html> 
<html> 

<head> 
    <title>Lab 2</title> 
    <style> 
    body { 
     background: #546436 
     /*#6096ec*/ 
     url('https://lilaum.com/pic/jaka.jpg' no-repeat fixed center center; 
     background-size: contain; 
    } 
    </style> 
</head> 

<body> 
    <pre> 
    more 
    to 
    do 

    Please help me, smth like to repeat just to 50% of page should be perfect, thanks, Grega from Slovenia 
    </pre> 
</body> 

</html>

出典

2016-09-04 user1081168

使用する複数の背景や直線勾配

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
    padding:0; 
 
    background-image: url('https://lilaum.com/pic/jaka.jpg'), linear-gradient(to right, #546436 50%, #6096ec 50%); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain, cover; 
 
    background-attachment: fixed; 
 
    height: 100%; 
 
}

出典

2016-09-05 11:36:07

背景画像とともにグラデーションを使用することができます。 https://jsfiddle.net/ged4sj35/

body { 
    background-image: url("https://lilaum.com/pic/jaka.jpg"), 
    -webkit-linear-gradient(left, red, red 50%, blue 50%, blue); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size: contain; 
}

：

すると、この作業フィドルを参照してください。

出典

2016-09-05 12:11:21

完璧な3つの部分のCSSの背景

答えて

関連する問題