How to fix blurry header image dawn theme

Store Design
1

why is my heading image blurry?
here is my store Savage Breaks

1514px by 326px

any help would be appreciated. I have tried a ton of different image sizes without any luck.

Thanks,
Geremy

2

hi @slimdiggie ,

i’m check and see your image have the height = 326px, but the min-height of div wrap the image = 420px, so the image be stretched => the image blurry.

Screen Shot 2022-07-04 at 23.00.08.png
Screen Shot 2022-07-04 at 23.00.08.png2866Ă—1304 681 KB

=> Have two way you can fix for that issue.

  1. You should be change other image have the height >= 420px, that mean the image will be convert to 1514px by 426px

  2. You can change the min-height in css file with way add the short code this at the bottom of assets/base.css file:

@media only screen and (min-width: 750px){

.banner–small:not(.banner–adapt) {
min-height:32rem !important;

}
}
This is result

Screen Shot 2022-07-04 at 23.11.37.png
Screen Shot 2022-07-04 at 23.11.37.png2876Ă—1252 708 KB

Hope can helpful to you!

3

I still can’t get this to work I feel like this should be an automatic thing within the shopify backend.

4

hi @slimdiggie ,

Does you tried add the css to the file i was suggest to you?

If you tried but it not working, can you invite me to the store, i will check free for you about this issue.

Hope can helpful to you! Thank!