余白を含めるようにdivの背景イメージを設定するには

Question

DIVの背景イメージを設定して、余白を含めてdiv全体をカバーしようとしています。私はMaterial Design Liteフレームワークを使用していて、クラスmdl-cellのdivのイメージバックグラウンドを設定しようとしているので、間にギャップのないグリッドがあるようです。 MDLはdivの幅を計算する際にマージンを考慮しているため、マージンを取り除くことはできません。その修正にはMDLをあまり変更する必要があります。

ここに私のコードです。また、実際のマージン、これは不可能ですが、我々は擬似クラスを使用して、それを克服することができますので、理論的には外側の境界からスペースを残すthis

.project{ 
    background-image:url(https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg); 
    height:200px; 
} 

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" /> 
<div class="project-holder mdl-grid"> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell1">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell2">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell3">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell4">hi</div> 
</div> 

Answer 1

でそれと対話する/確認することができます。次のリンクを参照してください。あなたのcss [here] [1]を更新しました。

[1]: https://jsfiddle.net/h1madb61/2/