Encountering an unusual problem - I have styled a div element using CSS to be initially hidden:
.thediv {
width: 100%;
height: 87%;
position: fixed;
overflow: hidden;
background-image: url(pics/FrameWithBG1280.png);
background-attachment: fixed;
background-size: 95% 87%;
-webkit-background-size: 95% 87%;
-moz-background-size: 95% 87%;
-o-background-size: 95% 87%;
background-repeat: no-repeat;
background-position: center 84%;
color: white;
padding-left: 100px;
padding-top: 50px;
top: -110%;
}
To reveal it, I use a button click event:
$('.thebutton').click(function(){
$('.thediv').animate({top:'11%'})
});
Everything works as expected, except that the background image doesn't display until I manually resize the browser window. This issue occurred consistently across Chrome, Mozilla, Opera, and Edge browsers.
Any insights on why this behavior might be occurring?