Okay
  Public Ticket #3042739
row background image position
Closed

Comments

  •  8
    jpryce started the conversation
    May 12, 2022 at 1:32pm

    Hi

    I'm having trouble positioning a background image for a row. The first product on this page (Variable Message Sign VMS) is using the attached image as a background to its header. There should be coloured dots in a square at the end but they're not showing. Presumably the image is the wrong size or positioned incorrectly. Currently its set Right Centre so logically should show the dots irrespective of the size.

    Any ideas?

    James


  •  279
    Noah replied
    May 12, 2022 at 5:17pm

    Hi James,

    That image is not the best for that area but it can work using this CSS:

    div.row-bg.using-image[style*="dotty-product-header.jpg"]{
    background-position:inherit !important;
    background-size: contain !important;
}

    add it to salient \ general settings - css script related - custom css code.

    Cheers. 

  •  8
    jpryce replied
    May 13, 2022 at 11:12am

    Thanks Eliud that worked. Would that mean that any row needing a background image would display that set in the CSS though? Not a problem right now as no other rows are using background images.

    James

  •  8,839
    Tahir replied
    May 13, 2022 at 11:14am

    Hey Again,

    No, the CSS only applies to the particular image name.

    Thanks 

    ThemeNectar Support Team 

  •  8
    jpryce replied
    May 13, 2022 at 11:16am

    Ah got it, so i'd need to set that specific image.

    Thanks

    J

  •  8
    jpryce replied
    May 19, 2022 at 10:13am

    Hi there

    Sorry i've just returned to this and on laptop its making a gap under the header and forcing the heading down. See this product row...

    https://coeval.boundarymarketing.co.uk/variable-message-signs/#VMS

    If I remove background image and replace it with colour its fine. Any ideas?

    James

  •  8,839
    Tahir replied
    May 19, 2022 at 1:39pm

    Could you provide a screenshot of the issue so we are better able to replicate it on our end ?. 

    ThemeNectar Support Team 

  •  8
    jpryce replied
    May 19, 2022 at 1:43pm

    No problem. Title is nudged down and there's a gap between the header and copy box. This disappears if I turn off the background image setting.


  •  8,839
    Tahir replied
    May 19, 2022 at 1:47pm

    Hey Again,

    Try adding the Dotted Image using another method and not add it as a background.

    Thanks 

    ThemeNectar Support Team 

  •  8
    jpryce replied
    May 19, 2022 at 1:57pm

    Its the background to a row containing a custom header. How else would you build it? I guess I could make the row 5/6 1/6 and put the image in the end. But then there would surely be gaps between the two row elements...

    James


  •  8,839
    Tahir replied
    May 19, 2022 at 1:59pm

    Try adding the image using a Pseudo CSS element on the Heading Div. 

    Thanks 

    ThemeNectar Support Team