Extending Image Past Edge of Browser Window

An image with part of itself extending past the edge of the browser window is relatively unusual. Which attracts the eye.

Examples are an image of a business card, a product image, or a logo. Perhaps a calendar. Or a currency symbol.

The image can extend past the left or top edge of the browser window or be tucked into the top-left corner.

The CSS position:absolute definition is used for these. The images will scroll with the content of the page.

(To have the image stay in position within the browser window when scrolling, use position:fixed, instead. The CSS Positioning page and the How to Position Text and Images Exactly and Relatively page have more positioning information.)

Put the img tag near the bottom of the web page. That's so, when it's positioned, it will be layered over anything it may overlap.

Example code below shows how to give the image a position:absolute definition to place it exactly where you want it. Position it so part of the image extends past the edge of the window.

The part of the image that extends past the edge will not be visible on the page, as the image will be cropped. The part that is visible will extend all the way to the edge.

Positioning the Image

For the example code, I'll use the WebSite's Secret logo:

<img 
   src="//www.willmaster.com/08images/wslogo150x156.jpg" 
   width="150" 
   height="156" 
   border="0" 
   alt="WebSite's Secret logo">
   
   

To give the image a position:absolute definition, insert a style attribute into the img tag.

<img 
   style="position:absolute; left:-25px; top:200px;" 
   src="//www.willmaster.com/08images/wslogo150x156.jpg" 
   width="150" 
   height="156" 
   border="0" 
   alt="WebSite's Secret logo">
   
   

style="position:absolute; left:-25px; top:200px;"

style="position:absolute; top:-25px; left:200px;"

style="position:absolute; top:-25px; left:-25px;"

The CSS position:absolute definition positions the image relative to the first parent element that has a position other than static. In other words, if the image is in a div (or other element) that itself has a position definition (except position:static;), then the position of the image will be relative to that div rather than relative to the <body...> tag.

If the image does not position itself as expected, you may have encountered what the above refers to. You can either:

• Adjust the top and left definitions until the image is in the position you want it.

Or:

• Move the image tag to almost near the bottom of the source code, immediately above the page's closing </body> tag. The img tag should then be beyond the influence of any element of the type referred to above.

It is also possible to position images to extend past the right and bottom edges of the browser window and to tuck them the other three corners. However, at least on some browsers, this creates a scrollbar that, when used, reveals the entire image.

In other words, the positioning is within the non-scrolled browser window - the content visible in the window when the page first loads. Scrollbars are created or adjusted as needed to accomodate the positioning.

style="position:absolute; right:-25px; top:200px;"

style="position:absolute; bottom:-25px; left:200px;"

style="position:absolute; top:-25px; right:-25px;"

style="position:absolute; bottom:-25px; right:-25px;"

style="position:absolute; bottom:-25px; left:-25px;"

With this article as a guide, images can be extended past the edge of the browser window using the CSS position:absolute definition. The images will scroll with the content of the page. (Use position:fixed for non-scrolling images.)

Will Bontrager