Background to have tile either side white middle

[Gonecamping]

Hi I have a website where I need the background to be white as the images for products are white. I given an example image. Black top and bottom headers, Gold I am wanting to create a repeat tile that will fill the area either side and I want where the Gold is to be white. How do I do this?

In the end I just want either side of the headers to be textured or what ever and the middle to be white?

Click on the link for example:

https://i.postimg.cc/YCnv2jFJ/Background.jpg


Any help will be appreciated thanks

Brenden

[Gonecamping]

Correction I wanted the gold to be the texture tile that repeats that I'll use a design program to create that will repeat to create the background but I wanted below the centre black to be white as the product shots are all on white background.
How is this done?

thanks

Brenden

[Pablo]

I assume you are using layout grids?

1. Set the background of the page to gold
2. Set the background of the grid or grid column to another color.

[Gonecamping]

Hi Pablo,

I had been using the layout grids and i managed to get the somewhat close as you will see in the link below.
https://i.postimg.cc/BnmHr7gj/sample.jpg

However, Im wanting the background to meet up with the main body and I am wanting the image to go as long as needed at the moment it stops.

Thanks

Brenden

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

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

[Gonecamping]

Hi Pablo,

I have uploaded the demo site with one page to the server. The issue I have is that I want either side to be a background with the centre white as stock images are white background. I created a layout which had three colums. Left and right i placed the background centre I left white.
But how do I move the background in either side? to meet up with the sides of the header?

https://www.baseballcaps.au/demo/demo.wbs


Thanks

Brenden

[Gonecamping]

Hi Pablo,
I was also wanting the background to go the length of the page I am having issues getting it to go the length. Thanks

Brenden

[Pablo]

I'm sorry, but your layout is not correct.
You have mixed up different layout modes. There is only one layout grid (flexible layout) while the rest of the layout is fixed/absolute.
When using layout grids, you will need to do this for the entire website, not just the background.
The difference is explained here:
https://wysiwygwebbuilder.com/layout_modes.html

If you are using fixed layout then you can add a background by adding a shape (for example) . Although you will need to add breakpoints to adjust the layout for different screen sizes.

This is what I mean, only here I have used different colors for the content area:
https://www.wysiwygwebbuilder.com/suppo ... raphy.html

But here are many more templates like this:
https://wysiwygwebbuilder.com/templates2024.html

[Gonecamping]

Hi Pablo,

Thanks for your reply. I was having problems trying to get the last design to work. So, i have reverted back to the one I had started with the template. But I was having problems with modifying the text ellements below the first images of the baseball caps there is text, when I try and move text to give space etc it bounces back to where it was positioned. How do I adjust the text. When its in this format Im struggling to edit.

I have updated the demo site to reflect the template version.

https://www.baseballcaps.au/demo/demo.wbs

Thanks

Brenden

[Pablo]

In flexible design with layout grids you cannot just move an object, because the size and position is controlled by the properties of the layout grid.
This is explained here:
https://wysiwygwebbuilder.com/layout_modes.html

If you want to add extra space between objects then can add margin to the object, via the 'Margin' properties.
To move the object up or down, use the 'Arrange' tools.

See also the Layout grid FAQ:
viewtopic.php?t=71391