Question: Hey guys I'm trying to get an image to stick to the bottom of my website. I can get it to stick to the bottom but then it stretches... This is my code:

```
<style>
    img {
      position: fixed;
      bottom: 0;
    }
</style>
<img src="fire.jpg" width="100%" height="100%" />

```

Instead of nicely sticking to the bottom of my webpage and changing dimensions as the webpage changes it's size, it just stretches around. All other Stack Overflow tips just do the same. Any help is appreciated.

Answer: 
I think what you're after is this:

```
<style>
.background-img {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/images/fire.jpg);
    background-size: cover; /* or "contain" */
    background-position: center bottom;
}
</style>

<body>
    <div class="background-img"></div>
    <div class="content">
        ...
    </div>
</body>

```

It's difficult to make an image do what you're asking for without distortion or unwanted vertical height issues.
First of all remove the `width` and `height` properties of your `img` tag. Then add to your img css `max-width: 100%` that will make your image responsive, and adapt to the screen size.