フッタの背景は傾きが必要ですが、中にはまれな形があります

Question

フッタの背景がノーマルに似ていないページがあります。ここでは、斜めの背景が適用されます。主な問題は、傾斜した背景が無地の色ではなく、内部に形があることです。だから、私はCSSでそれをすることができませんでした。この画像では、私はそのフッターを表示しています：

あなたは私のためにそれをチェックすることができるように私は、ここにあなたの背景画像を与えている： Background Shape Image

私はHTMLのようにしたい、としこれは：

<div class="main-content">Content here</div> 
<div class="footer">Footer item here</div> 

これにはどのようなCSSコードが使用されますか？

私はこのように試してみました：

.footer { 
width:100%; 
height: auto; 
background: url(image_url) no-repeat; 
background-size:cover; 
background-position: center center; 
} 

しかし、これは動作しません。これで私を助ける人はいますか？

Answer 1

バックグラウンドは常に下部にありますが、コンテンツとフッターの両方にあるため、メインコンテンツとフッターの両方を含むコンテナにバックグラウンドを置き、その位置を下部に設定する方がよいでしょう。

.container { 
    background: url("http://i.imgur.com/OTLuCgc.png") no-repeat; 
    background-size: 100% auto; 
    background-attachment: scroll; 
    background-position: center bottom; 
} 

コード：https://jsfiddle.net/jennift/e3e2Lo6h/2/

Answer 2

bgの上にメニューが表示されるようにするには、上部を塗りつぶす必要があります（bgイメージのサイズに比例して計算します）。

また、上端をコンテンツ要素にオーバーラップさせ、黒いテキストを重ならないようにするには、位置を相対的に設定し、上部を負の値に設定する必要があります（bgイメージのサイズに対して相対的に計算します）。

カバーを使用すると、計算が難しくなりますが、それを使用する正当な理由があると仮定します。それ以外の場合はそれを落として、フルサイズのbgで固執してください。

これを行うと、CSSの残りの部分は正常に見えますが、カバーを落とすとbgを下に配置する必要があります。

Answer 3

あなたは3つのdivにフッタを分割し、これらの3つの中で同じ画像を置く必要があり、その後、

first div -> margin-bottom:-200px; 
second div -> margin-bottom:-100px;