How to create a sticky image using CSS ?
Last Updated :
22 Jul, 2024
A sticky image in CSS refers to an image that remains fixed within the viewport when scrolling, but only after it crosses a specified position. This effect is achieved using the `position: sticky;` property, combined with a specific top, right, bottom, or left value.
For giving a sticky image effect to the web page two approaches can be used these are illustrated below.
Using Position Fixed
To make an image sticky using CSS with the position: fixed approach, add the CSS rule position: fixed; to the image element in your stylesheet. This ensures that the image remains fixed in its position even as the user scrolls through the page.
Approach
- Set up a basic HTML structure with <p> and <img> elements. Link an external stylesheet.
- Import the Poppins font from Google Fonts to define typography for the webpage.
- Set the height and width of the image. Use position: fixed; to keep it stationary.
- Define the top property to position the image 50 pixels from the top of the viewport.
- Add a 20-pixel border radius to the image for a rounded appearance.
- Apply a 5-pixel gray border around the image element.
- The image is positioned relative to the browser window and stays fixed during scrolling.
Example: The following example illustrates how to create the Sticky image using CSS position fixed property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
How to create a sticky
image using CSS
</title>
<link rel="stylesheet"
href="index.css">
</head>
<body>
<p>
Web development refers to the creating, building,
and maintaining of websites. It includes aspects such
as web design, web publishing, web programming, and
database management. It is the creation of an
application that works over the internet i.e. websites.
</p>
<p>
HTML: HTML stands for HyperText Markup Language.
It is used to design the front end portion of
web pages using markup language. It acts as a
skeleton for a website since it is used to make
the structure of a website. CSS: Cascading Style
Sheets fondly referred to as CSS is a simply
designed language intended to simplify the
process of making web pages presentable. It is
used to style our website. JavaScript: JavaScript
is a scripting language used to provide a dynamic
behavior to our website. Bootstrap: Bootstrap
is a free and open-source tool collection for
creating responsive websites and web applications.
It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the
websites are perfect for all browsers
(IE, Firefox, and Chrome) and for all sizes of
screens (Desktop, Tablets, Phablets, and Phones).
Bootstrap 4 Bootstrap 5
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231205165904/web-development-image.webp"
alt="gfg_img">
</body>
</html>
/* index.css */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
height: 150vh;
font-family: 'Poppins', sans-serif;
background-color: rgb(173, 239, 173);
}
img {
height: 100px;
width: 200px;
position: fixed;
top: 50px;
border-radius: 20px;
border: 5px solid gray;
}
p {
font-size: 30px;
color: rgb(27, 90, 27);
}
Output:
Using Position Sticky
To create a sticky image using the position: sticky approach in CSS, set position: sticky; on the image's CSS. This makes the image stick to its container when scrolling, based on the specified offset or container bounds.
Approach
- Set up a basic HTML structure with <p> and <img>. Link an external stylesheet.
- Import the Poppins font from Google Fonts for defining typography on the webpage.
- Set the height and width of the image. Use position: sticky; to keep it sticky.
- Define the top property to position the image 10 pixels from the top of the viewport.
- Add a 5-pixel light blue border around the image.
- Set the font size to 30 pixels and text color to dark blue.
- position: sticky; provides sticky behavior within the containing block.
Example: The following example illustrates how to create the Sticky image using CSS position fixed property .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
How to create a sticky
image using CSS
</title>
<link rel="stylesheet"
href="index.css">
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
alt="gfg_img">
<p>
Web Design is a field related to designing
websites on the Internet. Without a good design,
a website fails to perform well and cannot produce
a good impact on the user. Design is a creative
process that affects the ranking of the brand.
A good website design helps to create an engaging
online presence that captivates the audience.
</p>
<p>
Before beginning to design a website a user has
to be clear about what web designing is. It
is the art of making websites look and feel
good to the user and providing easy access to
the website features to the client. It focuses
on improving the user experience rather than
development.
</p>
</body>
</html>
/* index.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
height: 150vh;
font-family: 'Poppins', sans-serif;
background-color: rgb(159, 228, 228);
}
img {
height: 50px;
width: 100px;
position: sticky;
top: 10px;
border-radius: 20px;
border: 5px solid rgb(136, 192, 198);
}
p {
font-size: 30px;
color: rgb(18, 59, 87);
}
Output:
Both position: fixed and position: sticky can be used to create a sticky image effect, each with its specific use cases and behavior. Using position: fixed, the image remains fixed in the viewport regardless of scrolling, while position: sticky makes the image stick to its container based on specified offsets during scrolling.
Similar Reads
How to Create a Sticky Element using CSS?
A sticky element is a positioning technique in CSS that allows an element to behave like a relatively positioned element until a specific scroll position is met, after which it behaves like a fixed element. This is particularly useful for creating sticky headers, sidebars, or any other UI elements t
3 min read
How to create and use CSS Image Sprites ?
In this article, we are going to learn how we can how to create and use CSS Image Sprites. CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous
3 min read
How to Center an Image using Tailwind CSS ?
Here are the methods to center an image using Tailwind CSS: Method 1. Using Flexbox ClassesThis method centers the image both horizontally and vertically using Tailwind's flex, justify-center, and items-center classes. [GFGTABS] HTML <html> <head> <script src="https://cdn.tailwin
3 min read
How to create Image Comparison Slider using CSS ?
In this article, we will see how to create an Image Comparison Slider using CSS. The Image Comparison Slider essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images in a better way. Approach: The approach
2 min read
How to Create Style Labels using HTML and CSS ?
Creating style labels using HTML and CSS involves designing form labels that enhance user interaction. By applying CSS properties like color, font, and spacing, you can improve the appearance of labels associated with input fields, making forms more visually appealing and user-friendly. Creating Sty
1 min read
How to Create A Sticky NavBar Using Tailwind CSS?
Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of
4 min read
How to create Image Stack Illusion using HTML and CSS ?
In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS. Overview of the project: Approach: Create a main div in w
4 min read
How to create a Menu Icon using CSS ?
The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c
3 min read
How to Create Callout Messages using CSS?
Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS. Preview Image ApproachFirst crea
3 min read
How to Create Notes using CSS?
In web design, a "note" is a styled container that stands out from the surrounding text and is frequently used to highlight particular information. We can make visually appealing notes that improve user experience with CSS. ApproachThe HTML structure includes 'div' elements to create notes. The CSS
3 min read