Anchor a button in a certain position
<p>I have an <code>img</code> inside a <code>div</code>, the idea is that the div functions like a button in a fixed location that needs to remain in the same area even onresize event, for now I have the following on Jquery:</p>

<pre><code>$(window).resize(function () {
        $("#btnBanner").css("top", $(window).height() / 2 - ($("#btnBanner").height() / 2) + 350);
        $("#btnBanner").css("left", $(window).width() / 2 - ($("#btnBanner").width() / 2));
});
</code></pre>

<p>The code in itself what it does is to put the button in the middle of the page, even the half of the button is aligned to the middle of the window.</p>

<p>Now 350 is a test I did to position the button below a part of the image.</p>

<p>This is my html:</p>

<pre><code>&lt;div id="contentBanner" class="bannerPresentation"&gt;
    &lt;img id="btnBanner" class="btnBannerInitial" src="~/Content/Assests/img/btnBannerInitial.png"/&gt;
&lt;/div&gt;
</code></pre>

<p>this is my CSS:</p>

<pre><code>.bannerPresentation
{
    position: absolute; 
    z-index:10000;
    background-color:white;
    width:100%;
    height:100%;
    border-style: solid; 
    border-width: 1px;

    background-image:url(assests/img/home/image.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
}

.btnBannerInitial
{
    position:relative;
    cursor:pointer;
}
</code></pre>

<p>Basically the idea is to take out that 350 and make it variable to the resize, so when you resize it keeps in the same position, I dont know if this can be achieved, I dont know if there is another type of solution.</p>