How can I center a background-image vertically, which has a fixed background-attachment and is positioned 100px from the top? The background-size property is set to cover for horizontal centering but the vertical alignment is off.
Below is the HTML code:
<div class="header">
<h1>Header</h1>
</div>
<div class="container">
<img src="http://i.imgur.com/LJubdtP.png">
</div>
<div class="crosshairs">
<div class="xAxis"></div>
<div class="yAxis"></div>
</div>
CSS code:
/* CSS styling reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.header {
width: 100%;
height: 100px;
background-color: tan;
position: fixed;
top: 0;
}
.container {
width: 100%;
margin-top: 100px;
height: calc(100vh - 100px);
background-image: url('http://i.imgur.com/EvdsgOV.png');
background-position: center 100px;
background-attachment: fixed;
background-size: cover;
text-align: center;
position: relative;
z-index: 50;
}
.container img {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.crosshairs {
width: 100%;
margin-top: 100px;
height: calc(100vh - 100px);
position: absolute;
top: 0;
}
.xAxis {
width: 100%;
height: 10px;
background-color: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.yAxis {
width: 10px;
height: 100%;
background-color: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
JavaScript code:
var backgroundImage = new Image();
backgroundImage.src = $('.container').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
backgroundImage.onload = function() {
var object = $('.container');
var bgImgWidth = this.width;
var bgImgHeight = this.height;
var imageRatio = bgImgWidth/bgImgHeight;
var coverRatio = object.outerWidth()/object.outerHeight();
if (imageRatio >= coverRatio) {
/* The Height is our constant */
var coverHeight = object.outerHeight();
var scale = (coverHeight / bgImgHeight);
var coverWidth = bgImgWidth * scale;
} else {
/* The Width is our constant */
var coverWidth = object.outerWidth();
var scale = (coverWidth / bgImgWidth);
var coverHeight = bgImgHeight * scale;
}
var cover = coverWidth + 'px ' + coverHeight + 'px';
var containerHeight = $('.container').height();
var posFromTop = 100 + (containerHeight - coverHeight) * .5;
console.log(coverHeight + ' coverHeight');
console.log(containerHeight + ' containerHeight');
console.log(posFromTop + ' posFromTop');
$('.container').css('background-position', 'center ' + posFromTop + 'px');
};
The issue arises when viewport height exceeds 300px, causing incorrect calculation of coverHeight value. Here's the fiddle link for reference: https://jsfiddle.net/LxuxeL58/1/