hi,
I have a background image that does automatic resizing when the user maximizes their window. My problem is that the hot spots that I create do not stay in the same location when the user resize it them ... I have tried many methods and none worked so far. I tried setting position to relative, fixed, changing the height of width of the background, but nothing ...
I need help. Here is my code
<style>
img.bg {
/* Set rules to fill background */
min-height: auto;
min-width: auto;
/* Set up proportionate scaling */
width: auto;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 13%;
right: 13%;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
</style>
<style>
.hotspotted {
position: relative;
}
.hotspot {
display: block;
position: fixed;
visibility: visible;
background-image: url(sistersbtn_s4.png);
}
#calendar {
height: 107px;
left: 31px;
top: 646px;
width: 196px;
}
#sfhome{
height: 102px;
right: 941px;
top: 503px;
width: 265px;
}
#NEWHOTSPOT{
height: 102px;
width: 265px;
top: inherit;
left: 40%;
right: 13%;
}
</style>
</head>
<body bgcolor="#A3BF8F">
<div class="hotspotted">
<img src="1260x875back.fw.jpg" width="100%" height="100%" class="bg" border="0">
<a href="http://tiffinfranciscans.org/category/st-francis-calendar/" name="calendar" class="hotspot" id="calendar"></a>
<a href="http://www.stfrancistiffin.org/" name="sfhome" class="hotspot" id="sfhome"></a>
<a href="http://www.nba.com/" name="NEWHOTSPOT" class="hotspot" id="NEWHOTSPOT"></a>
</div>
Thanks
