- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
Updated on 08-Apr-2020 07:57:10
- Related Questions & Answers
- How to create a sticky element with CSS?
- Create a sticky navbar with CSS
- How to create a fixed/sticky footer with CSS?
- How to create a "sticky" navbar with CSS and JavaScript?
- How to create a Hero Image with CSS?
- How to create a responsive image with CSS?
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- How to create image filters with CSS
- Create a transparent image with CSS
- Create a mirror image with CSS
- How to create a responsive image gallery with CSS
- How to create a blurry background image with CSS?
- Create rounded image with CSS
- Create circled image with CSS
- Create thumbnail image with CSS
Advertisements