^Read my jsfiddle link^ I have a small jq script that adjusts background image size based on viewport dimensions. My issue is with a div (.png) that needs to be centered vertically and horizontally on the background, no matter the screen size. I've tried various units and values but it's not working well in mobile portrait or landscape. Is there a universal solution or should I use media queries?
Appreciate your help!
<div class="hero">
<img class="logo" id="biglogo" src="http://www.seomofo.com/downloads/new-google-logo-knockoff.png">
</div>
$(document).ready(function () {
$(window).bind('resizeEnd', function () {
$(".hero").height($(window).height());
});
$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 300);
}).trigger("resize");
});
/////
window.addEventListener("load", function(){
var load_screen = document.getElementById("load_screen");
document.body.removeChild(load_screen);
});
.hero
{
background-color: black;
background-image: url(https://unsplash.imgix.net/photo-1419064642531-e575728395f2?q=75&fm=jpg&s=490dffe2e11f468947891ab40651e176) ;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
background-position: 50% 50%;
}
#biglogo {
display: block;
position: fixed;
max-width: 50%;
margin: 25% 25%; /*??*/
z-index: 5;
}