Image always at bottom of screen in HTML

Question

I'm pretty new in the HTML world so this might seem like a stupid question.

I have this image that I always want to be at the bottom of the screen. So basically even if you scroll it will always remain at the bottom of the screen overlapping whatever other content there may be underneath.

Getting the image to start out on the bottom was no problem, I just gave it the location and it worked but when you scroll down it will end up being scrolled out of the screen which is something I don't want.

I did some googling and I found out that it should have something to do with the footer, but I never got it to work and that's how I got here!

So again sorry for the very basic question but I really need help on this one!

Thank you!

Are you looking for something like this http://jsfiddle.net/uw8f9/ Refer this post: http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol — Software Engineer, Jun 15 '13 at 00:30
A similar example to the one provided by @hmrgv: http://jsfiddle.net/A4BWX/ — , Jun 15 '13 at 00:32
An extension of Jakker's jsfiddle. I think this sounds more like what you want: http://jsfiddle.net/A4BWX/3/ — leigero, Jun 15 '13 at 00:49

score 2 · Accepted Answer · edited Oct 16 '22 at 23:19

To me, it sounds like you want a picture at the bottom of your web page (but not necessarily a footer bar). If that is the case, you can accomplish this goal by setting the image position to "fixed" meaning it doesn't move. And set the bottom and left margins (or right margin) to whatever you want.

Setting the styles within the HTML:

<img style="position: fixed; bottom:0; left:0;" src="image_location"/>

Using CSS file separately:

<img src = "image_location">    //html file

//below is the CSS applying to all <img> in the html.
img {
    position: fixed;
    bottom:0;
    left: 0
}

Image always at bottom of screen in HTML

1 Answers1