Page 1 of 1

Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 2:40 pm
by Angler
Hi,
I've not used web builder for a while and just tried to build a webpage but the web builder work area has changed.
The background image, https://www.fish-uk.com/backgrounds/ima ... d-1600.jpg is 1600 x 1000 size.

It used to show at this size behind all web builder pages but now it just shows behind the page (at the width of page) as I have shown by moving page over to the right. It doesn't extend past width of page This has affected all pages on my web builder. Pages look ok when, previewed with web builder. Here is an older page I have uploaded that is fine and shows background image full size behind the page. https://www.fish-uk.com/fishing_in_bedfordshire.htm

I've added a link to an image https://www.fish-uk.com/page3.htm

Any idea what I have done please? (I have probably clicked on something.)
Thanks

Image

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 3:28 pm
by crispy68
These don't look like the same scenarios to me. In the first link, you simply added an image to the workspace. In the 2nd link, you've added the image as the background for the page via the page properties set to fixed positioning.

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 5:35 pm
by Angler
Hi Crispy68,
The first link is just to show the image I am using as a background, I couldn't add it to my post as an image.

The second link I have posted shows a screenshot of the page I am talking about.
This shows that the image does not extend to it's full size, behind the page I am building, as can be seen in the 3rd link which is a page on my website.
Thanks

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 5:45 pm
by Pablo
To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Note that I cannot see what you have done based on the published page (HTML), because the software has thousands of options and millions of possible combinations.
So, there is no way to know which options you have used by looking at the HTML only.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 6:06 pm
by crispy68
So you have the background set to 'fixed' at the top vertically and centered horizontally. The image is only 1600px wide and fixed so it won't expand. So once the browser gets wider than 1600px you are going to see the colored background. If you want the image to fill the entire screen then you will need to add the following CSS to a code object/page html:

Code: Select all

<style>
body{background-size:cover;}
</style>

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 8:46 pm
by Angler
Hi Pablo,
Link https://www.fish-uk.com/fish-ukpage.wbs hope this is ok.

You will see, the background image is the same size as the page (768), and not (1600) , showing to the sides of the page. It is hidden under the page with grey showing to the side of the page , where as, the background image used to fill the web builder screen.

I had a page built for me, published to folder on desktop. On checking I saw it had a jquery script for lazy load or something like that. The page wasn't uploaded and has been deleted. Could this have anything to do with it.
Thanks

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 8:55 pm
by Pablo
As mentioned by crispy68, the background size is set to 'fixed'.
If you want to cover the entire background, then please select 'cover' instead.

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 8:56 pm
by Angler
Hi Crispy68,
Sorry I only just saw your reply.
I get what your saying about webpage stretching more than 1600. My webpages look ok online, it's just not showing right on the web builder. I cant see the background correctly while building a page because it is showing at the same size as the page width ,768, and not 1600. I posted to Pablo above that I had a page built for me and I saw it had a jquery script for lazy load. The page wasn't uploaded and has been deleted. Could this have anything to do with it.

Background is ok when published online https://www.fish-uk.com

Thanks Crispy68

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 9:45 pm
by crispy68
Sorry, thought you meant how it looked online. On larger screens like mine the image does stop:

Image

As for the workspace, I can't answer that. Pablo would have to chime in.

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 10:28 pm
by Angler
Hi Pablo,

I don't want the image to cover the entire background. It's 1600 wide x 1000 height and that's fine with me. All my webpages are showing the background image correctly with the css code :

background-image: url(https://www.fish-uk.com/backgrounds/ima ... d-1600.jpg);
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;

The problem is with the web builder. I'm guessing a setting has been changed. When I open it, it is not showing the background image as it used to. To the side of the page there was always part of the background image showing either side of the page I was working on; now it's not and to each side of the page the background id plain grey. When the page is previewed, it shows as it should, with the background image behind the page being worked on. This is the same for all pages I have in my project.

Just checked View, Design layout and Web layout. Design layout is not showing background image to either side of the page I'm working on (what I'm trying to sort)
Web layout shows the background image and the page I'm working on ok but is not centred but tight to the left side

Thanks Pablo

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 10:40 pm
by BaconFries
The problem is with the web builder. I'm guessing a setting has been changed. When I open it, it is not showing the background image as it used to
What do you mean by that? What version did it look as intended and what version are you using now?

As always it is best to provide a "Demo" of your project (.wbs) not a url. When doing so please read the following first.
viewtopic.php?f=10&t=82134

Re: Background image not showing behind page at full size

Posted: Wed Mar 20, 2024 11:07 pm
by crispy68
When I select the image as the background, in the workspace the image is centered for me. It looks correct as far as i can tell.

Re: Background image not showing behind page at full size

Posted: Thu Mar 21, 2024 7:02 am
by Pablo
Maybe you have enabled 'Design Layout' in the work space?

Go to View -> Web Layout to change it back

Re: Background image not showing behind page at full size

Posted: Thu Mar 21, 2024 11:04 am
by Angler
Hi Thanks Crispy68
I don't mind the space at the sides like you show.
The image you have posted is how it used to looked on builder, with the Toolbar at top, Toolbox, Object Manager on left side - Site Manager, Properties on right side. I will add images to show what I'm trying to describe
Thanks Crispy68


Hi BaconFries,
When I say the problem is with the web builder I don't mean it's faulty, I mean a setting has probably been changed. I will add an images to show what I mean.

Ive added a link to .wbs file. https://www.fish-uk.com/fish-ukpage.wbs
WYSIWYG Builder is version 15.
Thanks BaconFries


Hi Pablo,
Yes, I do have 'Design Layout' enabled in the work space.

If I change to Web Layout, I cant see what I'm working on because webpage and background moves across to the left of the workspace, partly hidden by Toolbox and Object manager.
I will add images to show what I'm trying to describe
Thanks Pablo


Image

This is how web builder workspace looks now. (in design layout)
The background image is the same width as the page (768) and behind it. The image is 1600 but it does not show to the sides of the page. If the height of the page was bigger I would not see the background at all.
When I use preview in browser it looks fine.


Image

This is how web builder workspace looks in web layout.
The page and background have moved across to the left and can't be worked on. If I could get the web builder to centre this it would sort the problem.

I've also linked to wbs https://www.fish-uk.com/fish-ukpage.wbs

Thank you everyone for your help

Re: Background image not showing behind page at full size

Posted: Thu Mar 21, 2024 12:19 pm
by Pablo
Based on the screenshots, it looks like you have undocked the toolbox, site manager etc, and that is why cannot see entire page.

My advise is to select "web layout" and reset the toolbox layout, as described here:
viewtopic.php?t=22937

Re: Background image not showing behind page at full size

Posted: Sun Mar 24, 2024 7:09 pm
by Angler
Hi,
Thanks everyone for your help and input. I'm not up to removing/ downloading / installing etc. files to run web builder so I'll get someone with a bit more tech knowledge than me to take a look.
Cheers