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)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay