JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div id="container1">
    <p>Content here</p>
    <p>Content here</p>
</div>
<div id="container2">
    <p>This has a non repeating background at the top but should join seamlessly to the section above (with the holes in the paper lining up).</p>
</div>

CSS

#container1 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-repeating_zps52e98fe2.jpg);
	background-repeat: repeat-y;
    background-position:center bottom;
	width: 80%;
	margin: 0 auto;
	padding: 3em 10% 0;
	max-width: 1200px;
}
#container2 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-bg-bottom_zps441e1bc3.jpg);
	background-repeat: no-repeat;
    background-position:center top;
	width: 80%;
	margin: 0 auto;
	padding: 3em 10% 0;
	max-width: 1200px;
}
@media (min-width:1024px) {
    #container2 {
        background-size: cover;
    }
}

JavaScript

function seamlessBottomBg() {
    var container = $('#container1');
	var bgTileAspectRatio = 65/1163;
	var tileWidth = container.outerWidth();
	var tileHeight = tileWidth * bgTileAspectRatio;
	//calculate how many px high the 'cutoff' last bg tile is, if there is a cutoff part
	var cutOffTileHeight = container.outerHeight() % tileHeight;
		if(cutOffTileHeight !== 0) {
		container.css('padding-bottom', tileHeight-cutOffTileHeight+1+'px'); 
			}
		}
seamlessBottomBg();