Usiłuję umieścić obraz tła na div, który używa granic CSS, aby utworzyć trójkąt. To moje dotychczasowe wysiłki. Działa dobrze z jednolitymi kolorami, ale tracę obrazy.

HTML

<div class="wrapper">
  <div class="left triangle"></div>
  <div class="right triangle"></div>
</div>

CSS

.wrapper {
  padding:50px 0px;
  height: 50px;
  position: relative;
  width: 300px;
  background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}

.triangle {
  border-bottom: 50px solid #eee;
  width: 50px;
  position: absolute;
  bottom: 0;
}

.right {
    right: 0;
    border-left: 100px solid transparent;
}

.left {
    left: 0;
    border-right: 100px solid transparent;
}

jsfiddle:http://jsfiddle.net/aRS5g/9/

więc, patrząc na JS Fiddle, w jaki sposób uczyniłbym tę szarą sekcję także wybranym tłem obrazu, zamiast używać kolorów takich jak # 111, #eee itp.