Image Banner Blurry

Store Design

Topic summary

A user reports their image banner appears blurry on their Shopify store and requests CSS code to fix the issue.

Proposed Solutions:

  • One response suggests adding custom CSS code to the theme’s base.css file, targeting specific banner elements with properties like min-height: inherit, position: absolute, and transform: translate to control banner rendering
  • The CSS modification involves navigating to Store Online → Theme → Edit Code → Assets/base.css

Technical Context:

  • Shopify automatically resizes images based on screen width for performance optimization, which may cause blurriness
  • An alternative approach mentioned involves modifying the image banner liquid file directly to prevent automatic resizing

Status: The discussion remains open with multiple technical solutions offered but no confirmation of resolution from the original poster.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello, My image banner ist blurry. Can someone write me the code for it?

https://heimatliebe24.de/
pw: yeegia

2

Hi @Chefhkoch22 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
#Banner-template--24108226871623__image_banner {
  min-height: inherit;
}
#Banner-template--24108226871623__image_banner .banner__media img,
#Banner-template--24108226871623__image_banner .banner__media {
  position: static;
}

#Banner-template--24108226871623__image_banner  .banner__content {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-height: inherit;
  transform: translate(-50%,-50%) !important;
}
3

Hi @Chefhkoch22

Shopify will automatically resize your image based on the width of the screen to optimize speed of store. If you don’t want it to be resized, you can change the code of the image banner.liquid file.