Background image not showing behind page at full size

[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

[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.

[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

[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

[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>

[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

[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.

[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

[crispy68]

Sorry, thought you meant how it looked online. On larger screens like mine the image does stop:



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

[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

[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

[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.

[Pablo]

Maybe you have enabled 'Design Layout' in the work space?

Go to View -> Web Layout to change it back

[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




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.




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

[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

[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