Dawn theme - rich text background image and gab between lines

[DSS5]

hi guys, i got stuck in this. as the screenshot provided. can someone help me, how can i reduce gab rich text between ‘heading’ and ‘caption’, also want to add background image in this particular rich text section. how to do that? any help please. URL deshoeshop .com

[ZenoPageBuilder]

Hello @DSS5

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

#shopify-section-template--20910929674533__4811dab3-4a83-4856-83ee-e3b1efc49d08 .rich-text {
    padding-top: 0 !important;
}

This will reduce the gap

Your current page structure cannot set a background image for that section, because it contains 2 separate sections inside (each line of text is a section)

[DSS5]

Thanks but this is not working. yes i got 2 separate sections cause unable to reduce gap before, thats why asking for help now.

After your reply. i am only working on 2 section but still code is not working. what could be wrong here? any help. thanks

[David_SHT]

Hi @DSS5 ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.rich-text__caption.subtitle {
 margin-top: 0 !important;
}

result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[DSS5]

perfect but how to add background image in it? please help

[ZenoPageBuilder]

I can see your section structure has changed now. That being said, now you can use this code to reduce the gap and set background image for it

#shopify-section-template--20910929674533__a84f0b9f-b8c6-4b5c-9b8c-098ff8966bb2 .content-container {
    background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg);
    background-size: cover;
    background-position: center;
}

#shopify-section-template--20910929674533__a84f0b9f-b8c6-4b5c-9b8c-098ff8966bb2 h2 {
    line-height: 1;
}

[David_SHT]

if you want change background image for section.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.rich-text.section-template--20910929674543__a84f0b9f-b8c6-4b5c-9b8c-098ff8966bb2-padding {
  background-image: url(https://imgv3.fotor.com/images/blog-cover-image/part-blurry-image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

replace your url path

result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[DSS5]

hi mate, just got another issue here. in desktop view image is good, in shopify mobile view image is good, but when i see in real mobile view, image is very not clear. whats wrong here. please see screen shot. thanks

[DSS5]

sorry mate, not working, but also a friend above helped me and his code is working fine, but not in real mobile view. in real (my) mobile view image is blurry. can you help me that. please see above reply to understand well. thanks for the help.

[ZenoPageBuilder]

Hi @DSS5

Did you remove the background image already? I don’t see it any more.