My webpage has a split background - blue at the top and white at the bottom. Here is the CSS style I am using to achieve this:
//accordion - changes colour on open / close
var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});.gradient {
background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
/* more properties */
}
.split {
width: 100%;
/* other properties */
}
/* more CSS code */
<section class="page-section page-section-md split gradient">
<div class="row">
<div class="col-md-2">
<h4 class="heading-responsive text-white">
Welcome
</h4>
</div>
<!-- more HTML code -->
</section>However, when I expand the Bootstrap panels inside the background, the background also moves (i.e., the blue extends lower as I open panels). How can I make the colors fixed regardless of the background size?
This link provides a good reference for achieving a fixed background when panels are expanded.
I believe this is a simple fix that I am overlooking. Thank you in advance for your assistance!