Home › Forums › WoodMart support forum › Row / background image – problem with layout

Row / background image – problem with layout

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 29, 2018 at 6:50 pm #35991

    gilesp
    Participant

    Hi … I have set up a image as a background in this row. Take a look at this test page but also the screen shot.

    https://www.web-design-hosting-surrey.co.uk/prime-factors-motorcycles/test-page-1/

    You will notice the actual graphic (1800px wide) her side but they don’t appear on the website. I want it to cover the whole width but I need it to look more like the original image. How can I achieve this? I have tried all options but can’t make it work and also it must work well on mobile too.

    Any ideas?

    Thanks,
    Giles

    https://www.web-design-hosting-surrey.co.uk/prime-factors-motorcycles/test-page-1/

    Attachments:
    You must be logged in to view attached files.
    January 29, 2018 at 7:56 pm #36018

    Artem Temos
    Keymaster

    Hi,

    You need to increase the image size if you want to fill the whole area correctly.

    Regards

    January 29, 2018 at 8:03 pm #36020

    gilesp
    Participant

    I tried this with many options but no luck. You can see the orange on the original but not on the page. Why is this? Have a look again please so you really understand.

    January 30, 2018 at 7:17 am #36047

    Artem Temos
    Keymaster

    OK, then try to disable header overlap option in Theme Settings -> Header -> Header layout. Also, edit the row with WPBakery and change its background image size from cover to contain.

    January 30, 2018 at 9:20 pm #36247

    gilesp
    Participant

    The overlap option was already disabled. The ‘contain’ option does not work properly. There must be a simple way to fix this? I realise it will be responsive but at 1800px wide it should look closer to the original. Why does it not just show the image at the right size? I can’t even see the orange left/right so it isn’t displaying properly. Can you log in and take a look please. Thanks.

    January 31, 2018 at 7:22 am #36294

    Artem Temos
    Keymaster

    As we can see you didn’t change anything as we wrote so no changes on your page. If you want to show the image in the original size you need to use Single image element instead. If you use it as a background it will take the size of the row which it is uploaded to.

    February 3, 2018 at 4:03 pm #37234

    gilesp
    Participant

    I have tried all the options you mentioned. I have not has this problem with other themes so perhaps it’s a bug.

    I can’t use a single image as I need to overlay text.

    I just need it to work on desktop and mobile but it does not. Hopefully you can fix it soon.

    February 3, 2018 at 4:15 pm #37242

    gilesp
    Participant

    The contain setting works on desktop but I need it to work on mobile too. As you can see it doesn’t appear as a backdrop – see screen shot.

    There must be a way to fix this so the image shows up from edge to edge. I could use the contain option but is there a way to make the image taller on mobile?

    I use the same technique using the Jupiter theme as this doesn’t happen.

    I hope this makes sense but please try it on mobile so you understand better.

    Thanks, Giles

    Attachments:
    You must be logged in to view attached files.
    February 3, 2018 at 4:27 pm #37246

    gilesp
    Participant

    I am now using the NO REPEAT option on this page and it seems work better for mobile … https://www.web-design-hosting-surrey.co.uk/prime-factors-motorcycles/meet-the-team/

    I will use this option for now but is there a way to remove the gap at the top of the page on mobile – see attached.

    Also, it still does’nt show the FULL WIDTH of the image but better than before. What size should the image be to make it fit exactly?

    February 3, 2018 at 4:28 pm #37247

    gilesp
    Participant

    Sorry, here’s the screen shot…

    Attachments:
    You must be logged in to view attached files.
    February 3, 2018 at 4:44 pm #37249

    gilesp
    Participant

    Sorry, I don’t think this is a solution. See this page https://www.web-design-hosting-surrey.co.uk/prime-factors-motorcycles/test-page-2/

    It puts a box around the image. Is there a way to fix this?

    Is there a way for the IMAGE TO GO TO THE EDGE? but keep it the same size a the original?

    February 4, 2018 at 11:12 am #37294

    Artem Temos
    Keymaster

    Hi,

    Please, provide us a screenshot how it should look on both desktop and mobile devices using other themes. We can’t understand your request at this point.

    February 4, 2018 at 12:06 pm #37318

    gilesp
    Participant

    Hi, Can you see the GREEN BORDER on this header https://www.web-design-hosting-surrey.co.uk/prime-factors-motorcycles/test-page-2/

    How would I remove this?

    February 4, 2018 at 2:11 pm #37334

    Artem Temos
    Keymaster

    Hi,

    But you have set this green color as a background for this row. Just remove it with WPBakery builder.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)