I’m currently facing a unique challenge where I want to have an image as the background of my website, with the size set to cover the entire screen. On this background image, there are elements like buildings that I want to interact with when hovered over by changing color or adding shadows. The issue arises when resizing the screen, as I am struggling to find a solution to move an overlay div to align perfectly with the building in the background.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/fixes.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="home">
<div class="map">
<div class="building1"></div>
</div>
</body>
</html>
CSS:
.home{
background:url(../img/homeBg1200.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript:
$(document).ready(function() {
function fixes() {
var windowW = window.innerWidth,
windowH = window.innerHeight;
if(windowW > 1199) {
// Calculations and adjustments for positioning the overlay div
}
}
fixes();
$(window).resize(function() {
fixes();
});
});
Is it possible to achieve this functionality?
Thank you!
PS: You can view the replicated code here: