Recommended Free Tools
Use CSS position: fixed when an image must stay in the same place in the browser window while the page scrolls. Use position: sticky when it should scroll normally until it reaches a threshold, then remain visible within its section. CSS float is different: it wraps text around an image and does not pin the image to the screen.
This guide shows complete, accessible implementations for each behavior, responsive safeguards, troubleshooting steps, and a no-browser-setup option with ScreenshotNeo for generating screenshots programmatically.
Choose the behavior you actually need
| Goal | CSS approach | Where it is constrained |
|---|---|---|
| Keep an image at a constant corner or edge while scrolling | position: fixed |
Normally the viewport; a transformed, filtered, or perspective ancestor can become its containing block |
| Let an image scroll with content, then hold it at an offset | position: sticky with an inset such as top: 1rem |
The containing block and nearest ancestor that creates a scrolling mechanism |
| Place an image beside text and let paragraphs wrap around it | float: left or float: right |
Normal document flow; it is not a viewport overlay |
MDN describes fixed positioning as a way to create a “floating” element that stays in the same position regardless of scrolling (MDN CSS position reference). Decide first whether the image is a persistent overlay, a section-level aid, or simply part of a text layout.
Create a fixed floating image
The following example pins a linked image to the lower-right corner. The width is capped and also scales down on narrow screens.
HTML
<a class="floating-image" href="/featured" aria-label="Read more about the featured item">
<img src="/images/featured-item.webp" alt="A short description of the featured item">
</a>CSS
.floating-image {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 10;
display: block;
width: min(8rem, 28vw);
}
.floating-image img {
display: block;
width: 100%;
height: auto;
}position: fixed removes the link from normal flow and anchors it to the viewport in the ordinary case. right and bottom set its offsets; z-index places it above ordinary content. The image keeps its intrinsic aspect ratio because its height is automatic.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Useful variations
- Top-left: replace
rightandbottomwithleft: 1remandtop: 1rem. - Centered on an edge: use
left: 50%andtransform: translateX(-50%), then settoporbottom. - Keep a close button or label reachable by keyboard by placing it inside the same positioned container.
- Use
pointer-events: noneonly on a genuinely decorative overlay; never disable pointer events on a control users must activate.
Make an image sticky within a section
Sticky positioning keeps an element in normal flow until scrolling reaches the specified inset. It is usually the right choice for a product image beside a long description or a documentation illustration.
HTML
<main class="article-layout">
<article>
<h1>Product guide</h1>
<p>Long-form content goes here...</p>
<p>More content...</p>
</article>
<aside class="sticky-image">
<img src="/images/product.webp" alt="Blue product viewed from the front">
</aside>
</main>CSS
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
gap: 2rem;
align-items: start;
}
.sticky-image {
position: sticky;
top: 1rem;
}
.sticky-image img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 700px) {
.article-layout {
grid-template-columns: 1fr;
}
.sticky-image {
position: static;
}
}The top inset is required for a useful sticky threshold. The sticky item cannot outlive its containing block, so it stops when the grid or section ends. Its nearest ancestor with a scrolling mechanism also affects the result.
Use CSS float only for text wrapping
If “floating” means text should flow around an image, use the older but still valid flow behavior instead of fixed or sticky positioning.
Free tools Windows power users keep installed
One-click scans. No signup required.
<img class="article-photo" src="/images/diagram.webp" alt="Network diagram">
<p>This paragraph begins beside the diagram and continues below it...</p>.article-photo {
float: left;
width: min(18rem, 45%);
height: auto;
margin: 0 1rem 1rem 0;
}
.article-photo + p::after {
content: "";
display: table;
clear: both;
}Float does not follow the viewport. Clear the float when the following content must begin beneath the image, or use a modern grid or flex layout for more predictable page structure.
Accessibility requirements
Write the right alternative text
MDN calls alt a textual replacement for an image (MDN img reference). For an informative image, describe its content or purpose concisely. For a decorative image, use alt="". If a linked image already has a clear accessible name from surrounding text or aria-label, avoid repeating the same words in alt.
Rank #2
Do not let an overlay hide content
Fixed images can cover buttons, paragraphs, cookie controls, or focused elements. Check the page with browser zoom and enlarged text, and test keyboard navigation. Keep the overlay small, provide sufficient contrast for any label, and offer a way to dismiss it when it is promotional or obstructive.
Adapt to small and short viewports
Use a bounded width such as min(8rem, 28vw), preserve the aspect ratio with height: auto, and test portrait phones, landscape phones, and short laptop windows. W3C WAI’s C34 technique demonstrates using media queries to un-fix sticky regions when available space is limited (WAI C34). WAI also cautions that sticky regions can disadvantage keyboard users and should be used judiciously.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do not hide meaningful images in CSS
Use an img element when the image conveys information or provides a function. CSS background images are appropriate for decoration; see WAI C9 for the distinction.
Fixed versus sticky: a practical decision checklist
- Pin immediately: choose fixed.
- Stick only after reaching a point: choose sticky with
top,bottom, or another inset. - Limit it to a card, article, or column: choose sticky; fixed is viewport-wide in normal circumstances.
- Keep its space reserved in the layout: choose sticky or normal-flow layout; fixed overlays do not reserve space.
- Could it obscure content at 200% zoom or on a phone? reduce its size, move it at a breakpoint, or remove the positioning.
Troubleshoot images that do not behave as expected
Fixed image moves with a component
Inspect ancestors for transform, perspective, or filter values other than none. Such an ancestor can establish the containing block for a fixed descendant. Move the image outside that ancestor or remove the property if it is not needed.
Sticky image never sticks
- Confirm an inset such as
top: 1remis set. - Inspect ancestors for
overflow: hidden,auto, orscroll; the nearest scrolling mechanism controls the sticky behavior. - Ensure the container is taller than the image and has enough scrollable space.
- Check that a flex or grid parent is not stretching the item unexpectedly;
align-self: startoften helps.
The image covers links or form controls
Lower its z-index, move it to another corner, reduce its width, or disable fixed positioning at a breakpoint. Never solve an obstruction by hiding focus indicators.
Rank #4
The image is distorted or overflows
Set width: 100% and height: auto, and constrain the parent. If you need a fixed box, use object-fit: contain or cover deliberately and provide an appropriate aspect ratio.
Text wraps incorrectly around a float
Clear the float after the intended content, or replace the float with grid or flexbox. A floated element remains in flow differently from a fixed or sticky element, so mixing the models without a clear boundary often causes unexpected layout.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and implementation notes
Basic fixed and sticky behavior needs no JavaScript, scroll listener, or animation library. Native CSS avoids synchronization bugs and reduces moving parts. Optimize the image file itself, use an appropriate format, provide intrinsic dimensions to reduce layout shifts, and avoid loading a very large asset for a small overlay. If the image is below the initial viewport and not critical, normal lazy-loading can help; do not lazy-load an image that must be visible immediately.
Or skip the browser setup
If your goal is to capture a page showing its floating image, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one request. Its capture can accept cookie and consent banners before removing more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
Use the API base shown in the ScreenshotNeo documentation:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Its Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to begin.
Frequently Asked Questions
Can I make a floating image move smoothly when the page scrolls?
Yes, but basic fixed and sticky placement does not require JavaScript. Add motion only when it improves comprehension, and respect users’ reduced-motion preferences with an appropriate media query.
Why does sticky stop before the bottom of my article?
Sticky positioning is bounded by its containing block. When that parent ends, the sticky element stops; enlarge the container or move the element into the section that should define its travel.
Should a decorative floating image have alt text?
No. Use an empty alt="" on a decorative img. Informative or functional images need concise alternative text.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
