页脚格式问题

Question

I'm trying to create a footer on my homepage with an image that takes up 100% width. I also then want a LinkedIn image linked to my LinkedIn account in the center of this footer. How do i get the LinkedIn logo and the footer picture to stay in the same positions and resize together when i adjust the browser window size? And is there a way to get my footer to float to the bottom of the page so when I adjust browser size it always stays glued to the bottom? Here's what I've written so far:

<footer>
    <img src="images/IMG_7745 (1).jpeg" alt="photography" id="tree_photo"><a href="linkedin.com/in/coby-labella"><img src="images/linkedinlogo.png" id="linkedin_logo" alt="logo"></a>
</footer>


#tree_photo{
    width: 101%;
    opacity: 40%;
    margin-top: 1%;
    margin-left: -1%;
    margin-bottom: -1%;
    display: inline;
    positon: fixed;
    bottom: 0
}

#linkedin_logo{
    display: inline;
    position: absolute;
    right: 42%;
    bottom: -23.5%;
    opacity: 80%;   
}

Answer 1

If i understood what you want to do there's the css:

footer {
    overflow:hidden;
    position:fixed;
    width:100%;
    left:0;
    right:0;
}
#tree_photo{
    width: 101%;
    opacity: 40%;
    margin-top: 1%;
    margin-left: -1%;
    margin-bottom: -1%;
    display: inline;
    position: absolute;
    bottom: 0;
}

#linkedin_logo{
    display: inline;
    position: absolute;
    right: 42%;
    bottom: 0;
    opacity: 80%;   
}

the position:fixed locks the footer on the screen, you already know left:0 and bottom:0 i guess. the overflow:hidden doesn't let the footer collapse on the absolute positioned elements. also you could use the background-image propriety on the footer to display the tree image

Hope it will help