In this article, we will learn how to create a sticky image using CSS. The sticky image effect is commonly used for images that must be visible at all times. We can give a sticky image effect anywhere we want using top, right, bottom, and left properties. 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. Doing this will ensure that the image remains fixed in its position even as the user scrolls through the page.
Approach
- Set up a basic HTML structure with elements like <p> and <img>. Link the external stylesheet for styling purposes. Imports the Poppins font from Google Fonts for defining typography to the webpage.
- Sets the height and width of the image. Setting the position of the image as fixed, making it stay in a fixed position on the screen. Set the property top to 50px for defining the image 50 pixels from the top of the viewport.
- Adds a border radius to the image element of 20 pixels for a rounded appearance.
- Applies a 5-pixel gray border around the image.
- The element image is positioned relative to the browser window. It remains fixed at its defined position on 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=
alt="gfg_img">
</body>
</html>
|
CSS
/* index.css */@import url(
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 elements like <p> and <img>. Link the external stylesheet for styling purposes. Imports the Poppins font from Google Fonts for defining typography to the webpage.
- Sets the height and width of the image. Setting the position of the image as sticky, making it stay in a sticky position on the screen. Set the property top to 10px for defining the image 10 pixels from the top of the viewport.
- Define a border with 5px with a light blue shade around the image.
- Setting the font size to 30 pixels and defining the text color to a dark blue shade.
- The property defined to the specified element position with value “sticky” provides behavior within its 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=
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>
|
CSS
/* index.css */ 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: