Problem scaling background to browser width

[girlfiend]

Hello,
I am new to Xara, and I wanted to re-create the website that I made in the WYSIWYG web designer I was using previously, but I have run into a snag almost immediately.
I have 2 bands of color on the top and bottom of the page that span the full width of the browser. I was not able to figure out how to do this, so I turned to the manual and the internet. I found tutorials for previous versions of Web Designer with "stretch to page width" and "web sticky/stretchy" context options, but those are not available in my version. Searching the manual for these terms brings up nothing relevant.

So please, how do I stretch an object to full browser width?

[xtom]

What version are you on? If you're on a really old version it's worth upgrading for the sticky/stretchy options.

[Egg Bramhill]

Welcome to TG girlfreind.

If you don't have Stretchy option, then the simplest way would to do this on the pasteboard layer. Lock all other layers and Ctrl+A You will get one rectangle selected. Fill this with one colour. Ctrl+K (Clone) this rectangle, fill with second colour. Zoom way out to 10%, then reduce the height to half page height.

Preview

[Chris M]

If you right click one of the bands, do you not see 'Web Sticky/Stretchy' at the bottom of the menu? (sticky/stretchy makes me chuckle...I'm such a child)

[girlfiend]

Hello everyone, thank you for your feedback so far. I am running version 15.1.1.54379. I do not see the web sticky/stretchy option, which is why I came here.

edit: When opening the .xar file linked above in Designer Pro X, I was able to find the sticky/stretchy option. Should I use Designer Pro X instead of Web Designer for my sites?

[siran]

If it is only the sticky and stretchy features you need then Web Designer Premium would also be an option, see comparison:
https://www.xara.com/us/web-designer/compare/
But you would miss some other Designer Pro features, see comparison here:
https://www.xara.com/us/designer-pro/compare/

[siran]

If it is just about single color rectangles you could also work around the missing stretchy functionailty with some little javascript code. I'm not sure if the standard web designer offers names and code at the website or page head and body sections. But if it does you could check the attached example.

As a summary: It uses a name attached to the horizontal rectangles (the name in concrete is htmlclass=to_full_width which in fact does nothing more than adding a class to the exported html tag). And there is some code added to the website head section, that when exported to the website does something with the rectanges that have the name attached.
In fact it just moves the left edge to the left of the window and changes the width to the width of the window. Okay there is a little bit more to it, but only the fact that when narrowing the browser window to less than the document width, then the code compensates this by doing the calculation based on the document width instead of the browser width.

I hope this babbling didn't distract you from checking it out. And if you have questions on how to use it or it doesn't work with your version (I use v12.6) then just ask again for more explanation or a correction to your version (but you would have to help me out with the exported HTML of your version).

[ss-kalm]

... Should I use Designer Pro X instead of Web Designer for my sites?

As far as I'm aware, if you have Designer Pro, then there's no reason to use (or even own) Web Designer, except if the version numbers are different. if the Web Designer is newer, then there may be features not in your version of Designer Pro. It always used to be that Designer Pro had ALL the features of ALL the other programs and then more. I suspect that that is still the case, Designer Pro should be able to do EVERYTHING ALL the other programs do.

[Acorn]

If it is just about single color rectangles you could also work around the missing stretchy functionailty with some little javascript code. I'm not sure if the standard web designer offers names and code at the website or page head and body sections. But if it does you could check the attached example.

As a summary: It uses a name attached to the horizontal rectangles (the name in concrete is htmlclass=to_full_width which in fact does nothing more than adding a class to the exported html tag). And there is some code added to the website head section, that when exported to the website does something with the rectanges that have the name attached.
In fact it just moves the left edge to the left of the window and changes the width to the width of the window. Okay there is a little bit more to it, but only the fact that when narrowing the browser window to less than the document width, then the code compensates this by doing the calculation based on the document width instead of the browser width.
I hope this babbling didn't distract you from checking it out. And if you have questions on how to use it or it doesn't work with your version (I use v12.6) then just ask again for more explanation or a correction to your version (but you would have to help me out with the exported HTML of your version).

siran, not had a chance of checking over your code but if you add a Page background colour, the stretch stops at the edges of the page and not to the viewport width; it is still OK for a background added to the Pasteboard.

Acorn

[Acorn]

Hello everyone, thank you for your feedback so far. I am running version 15.1.1.54379. I do not see the web sticky/stretchy option, which is why I came here.
edit: When opening the .xar file linked above in Designer Pro X, I was able to find the sticky/stretchy option. Should I use Designer Pro X instead of Web Designer for my sites?

I have Xara Web Designer Premium v15.0, which does have Sticky Stretchy. Web designer is a very cut-down version.

I would use Xara Web Designer Premium over Xara Designer Pro for website design as it is far cheaper and has 90+% of what Designer Pro does for website construction.

Acorn