Background image cover size with rollover responsible: is it possible?
Question
So I have this kind of challenge: image on backgound of body, backgound-size, cover to fit whole screen. and on the background image are some elements(building). So I want to hover over the building and they change collor or add shadow etc. the problem is on screen resize, when I'm resizing the screen I can't find a formula that will move an overlay div to fit the building in the background.
html:
<!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;
}
js:
$(document).ready(function() {
function fixes() {
var windowW = window.innerWidth,
windowH = window.innerHeight;
if(windowW > 1199) {
var proportionH,
proportionW,
indexTop,
indexLeft,
top1,
left1,
width1,
height1;
//indexTop = (proportionH-800)/3;
if((windowW / windowH) < 1.5) {
proportionW = (windowH * 1200/800);
proportionH = (proportionW * 800/1200);
indexLeft = (proportionW - 1200)*0.001;
indexTop = (proportionH - 800)*0.001;
top1 = proportionH*0.178-indexTop;
left1 = proportionW*0.476-indexLeft;
width1 = (proportionW )*0.084;
height1 = (proportionH)*0.482;
} else {
proportionH = (windowW * 800/1200);
proportionW = (proportionH * 1200/800);
indexLeft = (proportionW - 1200)*0.001;
indexTop = (proportionH - 800)/2;
top1 = proportionH*0.178-indexTop;
left1 = proportionW*0.476+indexLeft;
width1 = (proportionW )*0.084;
height1 = (proportionH)*0.482;
}
$('.building1').css({
'top': top1,
'left': left1,
'width':width1,
'height':height1
});
}
}
fixes();
$(window).resize(function() {
fixes();
});
});
it is possible to achieve this?
Thank you
ps: just replicated the code here: http://hardware-trade.com/site/
1 answers
solution1
0 2013-10-02 17:32:37
This can be fixed without javascript. You should use media queries in css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.