Home › Forums › WoodMart support forum › Row / background image – problem with layout
Row / background image – problem with layout
- This topic has 13 replies, 2 voices, and was last updated 7 years, 1 month ago by
Artem Temos.
-
AuthorPosts
-
January 29, 2018 at 6:50 pm #35991
gilespParticipantHi … 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,
Gileshttps://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 TemosKeymasterHi,
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
gilespParticipantI 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 TemosKeymasterOK, 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
gilespParticipantThe 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 TemosKeymasterAs 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
gilespParticipantI 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
gilespParticipantThe 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
gilespParticipantI 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
gilespParticipantSorry, here’s the screen shot…
Attachments:
You must be logged in to view attached files.February 3, 2018 at 4:44 pm #37249
gilespParticipantSorry, 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 TemosKeymasterHi,
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
gilespParticipantHi, 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 TemosKeymasterHi,
But you have set this green color as a background for this row. Just remove it with WPBakery builder.
-
AuthorPosts
- You must be logged in to create new topics. Login / Register