I have a project with numerous HTML pages all containing the same elements. To make updating easier, I decided to call all images from the CSS files so that if an image needs to be changed, I only need to update the CSS file rather than each individual HTML page.
However, I am encountering issues with displaying the images. The image in Section 2 should be the full height of its nested section, but it is not functioning as expected.
Check out the code here: https://jsfiddle.net/dreacaroli/206qn38m/5/
<!-- Section 1 with div-->
<div class="lightyellow section">
<div class="container">
<div class="row clearfix">
<div class="col-md-6 column img-responsive pull-right">
<div class="in-sch-section1"></div>
</div>
<div class="col-sm-6 column">
<h2>Reduce Scheduling Phone Calls</h2>
<p>With , your employees can check their schedules, request time off and swap shifts without having to call you.</p>
<a href="features.aspx#section3" class="btn"> Learn More</a>
</div>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Foster Customer Insights Through Schedules</h2>
<p>Create a schedule to repeat daily, weekly or monthly, or utilize our auto-schedule tool. The auto-scheduler generates random schedules based on specific criteria.</p>
<a href="features.aspx#section2" class="btn">Learn More</a>
</div>
<div class="col-sm-6">
<div class="in-sch-section2"></div>
</div>
</div><!-- /.row-->
</div>
</div>
To visualize how Section 2 should appear, click here: