Fixed Position Image

I'll show you how to place an image within the browser window that stays in position even with page scrolling.

Generally, this would be a small image at an edge of the browser window. But it can be any size image and the image can be positioned at any location within the window.

Although out of scope for this article, coding can be done to link the image to another page, to give it mouseover functionality, or even to switch the image like a slideshow.

Placing the image is done with HTML and CSS. Here is example code:

<div style="position:fixed; left:0; top:200px;">
<img src="https://www.willmaster.com/images/wmlogo_icon.gif" alt="Willmaster logo">
</div>

That code will place the Willmaster logo along the left edge of the browser window, 200 pixels down from the top-left corner.

To customize the feature for your own web page, make these changes to the above code:

1. Replace left:0; top:200px;" with the position for your image.

   The edges top, right, bottom, and left may be used to specify a position. Generally, either left or right is used and also either top or bottom.

2. Replace the red colored URL with the URL to your image. You may add CSS for your image, such as dimensions width and/or height.

When you place your image in its position within the browser window, it will stay there so long as your web page is being viewed, even when your page is scrolled.

(This content first appeared in Possibilities newsletter.)

Will Bontrager