img floating / adhered to footer

[r_tist]

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!

[Jon Fritz]

You've got a lot going on there that isn't likely to be the easiest way to do what you want in either your css or html.

It's hard to tell what you're going for exactly given the code and description you've posted.

Could you explain in a little more detail what you'd like to see?

[Nancy OShea]

I think you're way over complicating things.  Putting an image into a footer is very basic stuff.

And I can't understand why you're trying to use absolute positioning on a background image.   98% of the time, no positioning is required.

Can you supply a graphic of what you're trying to do?  I'm sure there's a better way that you have not considered.

Nancy

[osgood_]

The below, which is in your css code, will position the <div> above/outside of the footer, is that what you want?

top: -108px;  /* Position element */

Edited - its never going to work unless you get the name of the css selector and the id of the <div> correct (see your error below)

#imginfooter

<div id="imageinfooter"></div>