
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
How to create a sticky image with CSS?
Following is the code to create a sticky image with CSS −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { position: sticky; top: 0; width: 300px; height: 300px; } </style> </head> <body> <h1>Some header text</h1> <img src="https://i.picsum.photos/id/721/400/400.jpg"> <h1>Some header text</h1> <h1>Some header text</h1> <h1>Some header text</h1> <p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p> </body> </html>
Output
The above code will produce the following output −
On scrolling down a little the image will stay at its place as shown in the below output −
- Related Articles
- How to create a sticky element with CSS?
- How to create a fixed/sticky footer with CSS?
- Create a sticky navbar with CSS
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- How to create a Hero Image with CSS?
- How to create a responsive image with CSS?
- How to create image filters with CSS
- How to create a responsive image gallery with CSS
- How to create a blurry background image with CSS?
- How to create an image gallery with CSS
- How to create an avatar image with CSS?
- How to create a "black and white" image with CSS?
- How to create a full-page background image with CSS?
- Create a transparent image with CSS
- Create a mirror image with CSS

Advertisements