add image background to svg area

Question

I have this code for show svg over of my div :

<div class="div-2"></div>
<div class="div-1">
    <div class="decor-top">
        <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
        </svg>
    </div>
</div>

CSS:

.div-1 {
    background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
    height:250px;
    width:100%;
    position:relative;
}
.div-2 {
    background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    height:250px;
    width:100%;
    background-color:green;
    position:relative;
}
.decor-top {
    position:absolute;
    height:30px;
    top:0;
    width:100%;
     fill: #fff;
  stroke: #fff;
}

this worked but in div-2 I add green background and repeat texture image So for better design I need to add/(replace with white) green background and repeat texture image for svg area. how do add ?!

DEMO

do you want to add a white background only for the svg, and otherwise have a repeating green one?? — Persijn, Oct 18 '15 at 13:15
@Persijn: No i need to add green background+texture background like top `div-2` into svg area. — NewCod3r, Oct 18 '15 at 13:52

score 1 · Answer 1 · edited May 23 '17 at 11:44

Getting a arrow over another div like this is actually pretty difficult.
Here is a solution using clip-path. But this is only supported by chrome and firefox.
If your still looking for a better answer there are some really good answers on this question Transparent arrow/triangle by web-tiki

.div-1 {
  background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
  height: 250px;
  width: 100%;
  margin-top: -25px;
}
.div-2 {
  background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
  height: 250px;
  width: 100%;
  background-color: green;
  position: relative;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}

<div class="div-2"></div>
<div class="div-1">
</div>

i cant see triangle in your demo?! http://jsfiddle.net/4onnaoa2/8/ in FF not work. but in chrome is Ok — NewCod3r, Oct 18 '15 at 15:13

add image background to svg area

1 Answers1