img floating / adhered to footer
I would like to position a small photo on top of footer. I would like it to adhere to footer, yet flex with footer as needed.
I can't get this to work.
.footer-basic-centered{
background-color: #5956a5;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
padding: 45px;
margin-top: 80px;
}
footer{
position: fixed;
bottom: 0;
}
I then added:
#footerContainer {
position:relative;
width:100%;
}
#imginfooter {
background: url('../img/picture.png') no-repeat;
width:273px;
height:218px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
----------HTML-------------
<footer class="footer-basic-centered">
<div id="footerContainer">
<div id="imageinfooter"></div>
</div>
</footer>
Please can you advise, thank you!
AdChoices