I am currently attempting to position an image behind an angled SVG separator. Our goal is to achieve this look:
https://i.sstatic.net/2YnsY.png
However, the current display does not meet our expectations as illustrated here:
https://i.sstatic.net/5Dssf.png
Below is the existing HTML structure being used:
<!-- hero -->
<div class="container-fluid bg-hero padding-angled-medium">
<div class="container">
<h1>Learn <span>English</span></h1>
<h2>with someone perfect for you</h2>
<h4>Professional one-to-one English lessons with teachers who care</h4>
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<a class="btn btn-hero center-block" href="<?php echo base_url('book/free'); ?>">Free Evaluation</a>
</div>
<div class="col-md-6">
<a class="btn btn-secondary-cta default center-block" href="<?php echo base_url('courses'); ?>">View Courses</a>
</div>
</div>
<div class="col-md-6">
<img id="toucan" class="img-responsive pull-right" src="<?php echo base_url('Public/images/frontend/home/toucan.png'); ?>" alt="">
</div>
</div>
</div>
</div>
<!-- end hero -->
<!-- white angled svg -->
<svg class="angled-div" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10.1 0 10.1" fill="white"/>
</svg>
<!-- end white angled svg -->
Here is my SASS code that styles the page:
// hero
.bg-hero {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#4d000000',GradientType=0); /* IE6-9 */
width:100%;
h1 {
font-size: $font-largest;
font-weight: 800;
span {
color: $brand;
text-transform: uppercase;
text-decoration: underline;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5)
}
}
h4 {
margin-bottom: 30px;
}
// Media queries for responsiveness
}
Question: Is there a CSS technique or do I need to modify the HTML structure to achieve the desired effect of placing the image behind the SVG?