Centering a Large Background Image

[Bassman]

Hello,

I am really enjoying this program.

I have a questions regarding backgrounds that extend past the page size.

This is working well for me but I notice the background image when set as "background" starts at the left side of the webpage instead of being centered. So the area to the left of the webpage is tiled as the image flows to the right.

Is there a way to set the background image as centered?

Thanks

[jimhanus]

An image that's specifically designated to be a "Background" will automatically tile to fill the entire browser window unless a tweak is used to tell it otherwise. To have a large photo centered as a webpage background, make your page the size of the photo and import the photo onto the page. The downside of this is the photo file size can be quite big and cause a slow-loading site. Place everything else on top of the photo. Most of the templates use a shape as a background but this shape could just as easily be an image.

Jim

[Bassman]

Thanks for your reply Jim.

Here is what I am doing:

If I make the background image part of the webpage I get scroll bars as Xara treats the page like it is the size of the background.

So I make a 955pix page then designate a larger background image as "background" in the image viewer.

This eliminates the scroll bars and makes the background image fill the browser beyond the 955pix webpage.

This is working fine except the larger image is not centered, it starts at the left side of the 955pix webpage.

So under this scenario, I would like to have the designated background image centered.

[jimhanus]

Check out the Tweakset: http://talkgraphics.com/showthread.php?t=37550
This should help you. I use the "Don't Scroll" and "Static Background" on this site: http://www.pigeonrivercountry.com/index.htm

[Drwyd]

Hi Bassman

A quick and dirty tutorial for you.

Not as simple and easy as Jim's method but it gets rid of the horizontal scroll bar and centres the background image in the browser in one go.

Edit:- pixel alignment is critical with this method.

[Bassman]

Thanks for your replies.

1) Jim, I do not know what a tweakset is. Could you tell me what this is? I looked at the thread and it is very long. It the solution in the thread or the download?

BTW, when I looked at your site, the background showed some tileing on the extreme right side and the webpage even though it is 500 or 600pix tall still scrolled up and down. I don't know how it was designed, just pointing it out. My monitor resolution is 1650pix wide.

2) Drwyd, looks like a way around the issue. I guess Xara needs to start the background image at the last known point would would be the edge of the page? I am surprised it would not be able to center the background.

Thanks for your help!

[jimhanus]

Bassman,

Download the tweakset in the first post. It will allow you to do a lot of things Xara can't do on it's own, such as the no scroll background or locking popups.

Background image on that one site was 1600x1200px so it would show some tiling after that point. Yes the webpage scrolls, but the background doesn't move. Conventionally the whole page, including the background, would scroll together. I wanted the background to not move.

Jim

[Bassman]

Thanks.

If I install the tweakset, can I get the background centered and not have the page scroll if it is small enough to fit on the screen?

[jimhanus]

Yes, depending on the picture. One of the tweaks is "Do not tile background". If you do a search or read the posts for the tweakset and you'll see how to install it and what it can do.

Jim

[Bassman]

Thanks Jim.

Just to clarify, I would like any scolling to only be associated with the size of the webpage, not the size of the background image.

For example, if the webpage is 955x800 but the background image is 1650x1100 - no scrollbars on most modern monitors and the browser ends vertically at 800pix.

Is this possible with the tweakset?