How to create a sticky image using CSS ?

Last Updated : 09 Jan, 2024

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.

Table of Content

Using Position Fixed
Using Position Sticky

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20231205165904/web-development-image.webp" 
         alt="gfg_img"> 
</body> 
  
</html>

CSS

/* 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:

stickyimg

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= 
"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>

CSS

/* 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:

fixedgfif

Suggest improvement

How to add a button to an image using CSS ?

Share your thoughts in the comments

How to create a sticky image using CSS ?

Using Position Fixed

Approach

HTML

CSS

Using Position Sticky

Approach

HTML

CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?