This is the effect I am after for each page...

screen shot 2

Andy, you can do exactly as you wish by setting your header and header background transparent exactly as you have done, then go to step 3 map, select the page, select properties, click on graphic tab, enable custom settings and add your website background image of choice.

Alternative

If you are feeling adventurous, create a minimal header 1 pixel deep, then in the first row of every page place your header, in the second row place your menu, in subsequent rows place your content. When complete go to step 4 page and select row formats. Select all rows and you can now place a full width paralax (or fixed) image, slide show or movie behind everything. (If I was doing it this way I would create a minimal header with your logo, etc but no menu)

Let us know how you get on??

Hi.. I can see the result with the page background image but not quite the result so would like to try the alternative you suggest... I cant see how to place the header in the first row of each page ?

Andy, to put the header in the first row, simply put what ever you want in any cell, on the next row, add your menu, to add the menu you will have to select main template contents or all categories

Why is replacing the website background not quite what you want, isn't that how you did your examples?

Hi. Replacing the background then has the text over it which then makes it un readble...

we have a supplier who has a similar type of effect I am looking to do..

https://cshe.com/

this is the result or similar I am aiming for...

Andy, surely the choice of background image and the choice of contrasting text colour for the menu is the problem rather than the technique.

If you wish to emulate the dark shading behind the menu over the image to improve readability, you can use step 4 pages, row formats to apply a gradient colour to a range of rows.

I have attached the project I created in order to demonstrate the technique.

With all these options you have pointed to me I am sure I can now come up with a similar effect.

One last question, is it possible to have the menu lower down the page ?

I have overcome this by putting a text box in row 1 with a column of full stops to pust the menu down but now with a coloured background these will show ?

If I put a html box abov the menu like you did in your sample would this drop the menu ?

Many thanks for te info / project sample, this has been a great help.

Hi, you could take a look here to better understand how to do it (in this videos are explained two different methods to get what you want):
https://youtu.be/9LQ0qhDYYTE

Andy, yes if you place anything it will show, although before I learnt the html object trick I used a single colour image set to the appropriate size with the colour set transparent in a text box (it is an extra step, but an advantage is the depth is proportionally reduced as the width reduces).

The advantage of the html object (without content) is that you can specify the number of pixels deep (bottom left when you open the object).

I have only done the desktop layout, you will need to visit step2 template, template structure to configure header, header background, page background footer, etc for EVERY resolution.

I'll leave it up to you to work out suitable colour attributes if you choose to use the sticky bar :-)

Glad I could help - enjoy!!

PS As Giuseppe's video reminded me, you could simply modify the margins of the menu object (cell style) to force a gap above and or below the actual menu inside the cell. Then you would not need an object before (or after) the menu.

. . . . there is always more than one way :-)

Please mark something as correct so others looking for a similar solution can find this discussion more easily.

Giuseppe, I have watched those videos and they helped me a great deal.

In this case Andy wanted the menu to appear over the background, and more importantly he wanted black graduated to transparent across the top of the image (without modifying each image) so his white text menu was always visible in spite of the colours on the picture background, this was achieved by putting the menu on the page rather than the header, and then using row formats on a group of rows to add gradient fill.

I nearly have the site working well but have come across a problem with the responsive views. The background image in stage 3 page properties is enabled to custom setting and set to fit to window.

When the site is displayed in the preview for smaller screens, the background images are not there ?

Screen shots of the results..

Screen shot 2

Andy, in step2 template, template structure.

Have you ensured the page content (& page background) is set to transparent for each resolution?

Hi. I did think about that after I had posted, I have now done this and all working well...

Many thanks again. 

Hopefully one last question...

Even though the background images are selected to "fit window" the crop the image each time you go down in size from PC to tablet to mobile and dont actualy shrink the image ? Is this soemthing which can be rectified or something which has to be ?

Hello Andy,

Desktop, Tablets, Smartphones have different resolutions. So, when you want to create a background picture for your website, you have to keep one thing in mind that to create different viewports and adjust your website contents for those viewports to show your website perfectly on each device.

For example,

Desktop has the viewport 1368XX768, So you have to adjust your image for this resolution to show your background image perfectly.

Feel free to keep posting on Website X5 Help Centre

Thank you

Hi ANI B.

I take it this is for the template background?

I am using a different background for each page, with a transparent background in the templates.