Whenever I resize my window or open on a different resolution my header image stretches. How do I make it so that the image dimensions stay static?
Topic summary
A user is experiencing an issue where their header image stretches when the browser window is resized or viewed at different resolutions.
Solution Provided:
A PageFly support representative offered a CSS fix involving three steps:
- Navigate to Online Store → Theme → Edit code
- Locate the relevant stylesheet file
- Add CSS code with
object-fit: contain !important;property to the background image class
This CSS property should prevent the image from stretching and maintain its original aspect ratio across different screen sizes.
Status: The thread appears to have a proposed solution but no confirmation yet on whether it resolved the issue.
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file styles.css
Step 3: Paste the below code at bottom of the file → Save
.background-image__image {
object-fit: contain !important;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly