Fixing Chrome issue with buggy position fixed CSS backgrounds (especially tileable repeated pattern backgrounds)

Fixing Chrome issue with buggy position fixed CSS backgrounds (especially tileable repeated pattern backgrounds).html

// Fixing Chrome issue with buggy position fixed CSS backgrounds (especially tileable repeated pattern backgrounds)
// credit http://stackoverflow.com/questions/23571578/chrome-issue-with-background-attachment-fixed-and-position-fixed-elements

// the markup

<div class="section text-center fixed-bg" id="pricing">
	<div class="section-clipper">
		<div class="section-image">
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<h2>Pricing</h2>
				<!-- Generic content -->
			</div>
		</div>
	</div>
</div>

// the CSS

.section {
	position: relative;
	min-height: 750px;
}

.section-clipper {
	position: absolute;
    clip: rect(auto,auto,auto,auto);
    width: 100%;
    height: 100%;
}

.section-image {
	background: url(images/yellow-background.jpg) repeat;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}