Using position: fixed – CSS
<p>Referring to this website – www.mrandmrsbutt.com – I'm trying to position the 'Upwaltham Barns' graphic at the bottom centre of the viewport, so no matter what size the viewport is the graphic will move with it and stay at the bottom.</p>

<p>I've tried adding the following custom CSS into my WordPress site, but it doesn't seem to work:</p>

<pre><code>.fix{
    position:absolute;
    bottom:0px;
    left:50%;
    }
&lt;img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/&gt;
</code></pre>

<p>Here is all my custom CSS at the moment:</p>

<pre><code>#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
    background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
    background-size:cover;
    background-position:center center;
    height:100vh;
}
.centre{
    display:inline-block;
    text-align:center;
}

#navigation-bar{
    background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
    background-repeat:repeat-x;
    height:48px;
}

p{margin-bottom:10px;}
.paper-background{
    background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}
</code></pre>

<p>Can anyone help?</p>