rich text - gap between headings and background image - dawn theme

Shopify Discussion

Topic summary

A Shopify store owner is experiencing two issues with the Rich Text section in the Dawn theme:

1. Heading spacing: They want to reduce the gap between two separate headings within the Rich Text block.

2. Background image quality: While attempting to add a background image to the Rich Text section, the image appears sharp in Shopify’s desktop and mobile preview but renders blurry on actual mobile devices (iPhone and other phones tested).

A helper provided CSS code to:

  • Add the background image via base.css
  • Remove top margin from headings
  • Set background properties (center position, cover size)

Despite implementing this solution, the blurriness persists on real mobile devices. The user confirmed they’re using a 1200x675px JPG at 72 resolution, and the issue occurs regardless of which image is used.

Current status: The helper has requested the setup be restored so they can debug directly on their own mobile device. The issue remains unresolved and under investigation.

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

hi guys can you please help me in this.

1> As in screen shot provided - ‘rich text’ with 2 ‘seperate headings’. i want to reduced gap in between headings.

2> Also, i want to add background image in rich text. I tried to add background image before, which was good in ‘Desktop View’ as well as in ‘Shopify Mobile View’ but in ‘Real Mobile View’ image was Blurry(kind of zoomed). can someone help me in this please?

url- deshoeshop. com

thanks

Screen Shot 2023-10-08 at 6.20.28 pm.png
Screen Shot 2023-10-08 at 6.20.28 pm.png1013×306 19 KB

1 Like
2

Hello @DSS5 :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.section-template--21192420950309__e6514a71-c57b-4b55-9157-ac6a025b8d5b-padding {
    background-image: url(https://img.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg);
    background-size: cover;
    background-position: center;
}

.section-template--21192420950309__e6514a71-c57b-4b55-9157-ac6a025b8d5b-padding .h2.rich-text__heading {
    margin-top: 0;
}

The result

Screenshot 2023-10-08 at 15.44.09.png
Screenshot 2023-10-08 at 15.44.09.png749×172 65.5 KB

3

thanks for the reply but having the same issue with background image. In real phone(mobile view) image is blurry. please see screenshot.

IMG_7044.jpg
IMG_7044.jpg1290×974 72.2 KB

4

I think it is because of the image you use for the background. Here you see if you use the suitable image it looks like this

Screenshot 2023-10-09 at 10.57.41.png
Screenshot 2023-10-09 at 10.57.41.png349×190 26.9 KB

Can you share the image you used?

5

image i am using - .jpg format - 1200X675 pixels - 72 resolution.

Problem is - image is good on my desktop but not in my mobile phone, not even in other mobile phones.

You are checking image in Shopify Desktop View and Shopify Mobile View, which is even good in my case to but when i open website in my iPhone, image is blurry, but in computer image is good.

6

Can you send me the image you used?

7

hi mate, it doesnt matter what image i am using, it is always blurry in real mobile phone. but when you check in shopify editor its good in both (desktop and mobile). i used others images but all are the same, blurry in my phone, even in my other phone and family members phone.

please see current image i am using below.

rich-text-BG.JPG
rich-text-BG.JPG1200×675 290 KB

8

That is strange. Can you set it up again? I will need to check on my phone to debug.

9

i just set that up for you. only for few minutes. have a look please.