How to anchor a hovering object to background image

Question

So basically here's the page that i'm editing atm

http://coralines.co.vu/

depending on what screen dimensions you have when you hover over the cat his eyes blink, or there are two random black dots hovering around in the void. What I'm trying to figure out is how to make it so that the latter doesn't happen. I'm trying to figure out how to make it so that when the dimensions of the page are changed the hover object stays with the cat/background image instead of moving away from it. Thus making the blinking cat universal to screens of all dimensions.

here's the code for the hovering object

#cateyes {
  position: fixed;
 margin-top:-280px;
  margin-left:1088px;
opacity:1;


-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#cateyes:hover{
  margin-top:-270px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }

and here's the coding for the background image

body{
 background-color: {color:background};
 background-image: url('{image:background}');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: bottom right;

margin:0px;
color:{color:text};
font-family:times;
font-size:10px;
line-height:100%;
z-index:2;

}

I thought that maybe positioning the cateyes in the bottom right and then messing around with the margins would work but every time i try to do position:bottom right nothing happens. Any help would be greatly appreciated.

Answer 1

You're positioning the cat eyes as fixed from margin-left. If you position them according to margin-right, it should do as you ask?

If that doesn't work... Another option is to get the position of the element containing the cat image and set the eyes to

position:absolute;

and use a variation of this code:

window.onload = categoryButton;
window.onresize = categoryButton;
function categoryButton()
{
    var determineLocation = $('#categoryDiv').position();
    var divWidth = $("#categoryDiv").width();
    $('#addCategoryDiv').css(
    {
        position:'absolute',
        top: determineLocation.top + 'px',
        left: determineLocation.left + divWidth + 'px'
    }
    )
    if(navigator.userAgent.search('Firefox') >= 0)
    {
        $('#addCategoryDiv').css(
        {
            left: determineLocation.left + divWidth - 80 + 'px'
        }
        )
    }
}

Where #addCategoryDiv is your cat's eyes and #categoryDiv is your cat

I used this code to place a form within a form on a website before. If the window is resized it will stay with the element you set it to stay with

The code above placed my "addCategory" div element according to my "categoryDiv" div element on my page and the position of "addCategory remains fixed to the position of "categoryDiv" even when the window is resized.

The second part of the function tests if the browser being used is Firefox, and if so to subtract 80px (this was for visual reasons). You can add other browsers if you want, I only needed specific browsers for my project (for more info: http://www.quirksmode.org/js/detect.html) There are other methods of doing this as well.

This is what worked for me anyway, hopefully it helps you