DEV Community

archi-jain
archi-jain

Posted on

how to fix image in CSS

To fix an image in CSS, you can use the position property and set it to fixed. This will position the image relative to the browser window, and it will not move even if the page is scrolled.

Here's an example of how you can fix an image in the top-left corner of the browser window:

img.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

You can also use the bottom and right properties to position the image in other parts of the window.

img.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

To apply this style to an image, you can give the image a class name (e.g., "fixed") and then use that class name in the CSS selector (e.g., "img.fixed").

<img src="my-image.jpg" class="fixed">
Enter fullscreen mode Exit fullscreen mode

I hope this will be helpful in your projects. If you like it then do share it.

Top comments (0)