Help with fixed backgrounds

[greenmom]

I'm very new with Blue Voda and I've been watching all the tutorials and while they are really helpful, I can't seem to find one on placing a fixed background with the center a different kind of background. Can you direct me to this info or help me, THANKS!

[Vasili]

Re: Help with fixed backgrounds

There isn't a Tutorial on working with backgrounds or images probably because it is such a large subject (refining the editing of images, types, etc.) and simply using/inserting images is a pretty common skill with using Windows and all the other Social Media platforms and so on.

The "trick" to using images as a background to a website is simply making sure you are using the right size, so it displays not only in your system as you design it, but universally in other visitor monitors also.

I am currently developing a site of my own this very moment, and maybe you can help to "proof" it for me with respect on how the background is displaying .... http://www.LuxuryServicesGroup.com (After seeing the "reference points" in the tip below, you can report if the site is displaying evenly. yes?)

Since this site is 960 wide (the max for compliance), I needed to use an image that would display in all monitor resolutions (people are using pretty much 1024x768 nowadays, but many use higher due to larger and larger monitors - 1440, 1620, etc.), so I chose my background to be 1440 wide, careful to have "depth" for page length as well.

If the image you choose is not as larger (or larger) the the most common resolution, it will "tile" across the monitor (repeat, both horizontally and vertically) and make it useless for effect.

You have to design your pages with the knowledge that this is how things work and not freak when seeing things before they are allowed to display properly: you will note the "shift" from how it looks in the Blue Voda workpane to how it displays once published.
If you use this link, you'll see what I mean on how the visuals "change" and how you must rely on your knowledge that things will display as desired.
BTW: These screenshots are just how it displays in my monitor using my settings .... it may "shift" in other people's screen according to their monitor size and the resolution they have set.

I recommend an using a single image no smaller than 1440x900 (or taller, if needed!).

[greenmom]

Re: Help with fixed backgrounds

Thanks so much :)
Fist of all your site looks great from my computer,really nice,very professional.

I think I understand the issue of an image, the part I was having troubles with is layering a background on top of another so it looks as if it has a border. Then putting all your information in the top layer, so to speak. I ended up putting an shape and then filling it with color. I then put the logo in it an started working on it and so on. When I am in the editor and I put my logo at the top of the page and then view it, I wasn't able to see it. I then discovered I had to drag the logo down quite a ways in on the page in order to view it in the preview. I am totally confused at why this happens.
After seeing your page I want to completely start over, lol. a work in progress for sure. Thanks again for you help, it looks like I will be here alot.

[Vasili]

Re: Help with fixed backgrounds

Whew! I'm glad the background looks nice in your computer too: I used 3 different computers, 4 browsers, but only 2 resolutions so I wasn't all that sure it would do as hoped. (Devoting this weekend to fully publish all 6 sites, now that I have my "corporate portal" site up)

Just remember that no matter what you are trying to accomplish in using a background, everything has to be registered "left" with respect to the workpane guiderule when you are building your pages .... even if you "chop up" an image to make a left and a right side to be an "underhang" (is there such a word?) so it peeks out from under the page edges, these too must be considered part of your page construct and "centered" in your workspace likewise.

The only way to have an image automatically populate as a background apart from the actual page construct is to enter it using the dialog in Page Properties.

So ... when you use shapes, etc. to "layer" under the page to serve as a background, you must either build your site in layers, or play with "send to back" until you get the order right, all the while the furthest margin always against the left workpane rule: this way, when your site is commanded to "center in browser" it knows where the 0/0 axis is and will dutifully register the page wholly. If you try to "center" your page design in BV, you will end up with a huge margin on the left side when published.

[navaldesign]

Re: Help with fixed backgrounds

Eric, your background is repeated to the right. In my large monitor it dosn't look quite nice.

[Vasili]

Re: Help with fixed backgrounds

Eric, your background is repeated to the right. In my large monitor it dosn't look quite nice.

GREAT! Now I am going to have to re-think this altogether, as if I re-size the background to 1640 it will satisfy the "big monitor" Visitors but look freaky for the average User because everything will be thrown off completely (it still works well enough for the 1024 viewers, based on the "width" of the graphics, but if I "stretch" it, it will look wayyyy off-center for 80% of Visitors, yes?).

How many pixels (estimated) is showing on the right (and what resolution is your setting)? Would proportional resizing to 1500 work? Or do I really need to go to 1600???
My resolution is set at 1440 and I'm using a 22" monitor.

[Vasili]

Re: Help with fixed backgrounds

?? No reply?
Trying to resolve this site first before rushing to complete the total project this weekend ...

[navaldesign]

Re: Help with fixed backgrounds

My monitor is set to 1680 x1050 . With sidebars closed, I see exactly the difference between your image width and my monitor 1980.

Anyway, solution:

Remove the background image from Page Properties, Formatting .

Click on Page HTML, Inside Body, and add this code:

style="background-image: url(images/newColorsplash.JPG);background-repeat: no-repeat; background-position: center top;"

Make your newColorsplash image large enough (example: 1700 px) and upload it with FTP in the same folder where images are kept.

This way the background image will center in all cases, and, being large enough (1700 px) will always be fine.

[Vasili]

Re: Help with fixed backgrounds

Thanks! I forgot all about populating via styles and links. Last time I did something like that was a couple years ago for a slideshow I think, so it would load faster.

I spent a good hour doing it manually until popping in to see this. As always, I appreciate it!

[Vasili]

Re: Help with fixed backgrounds

Sorry, General ..... didn't work for me after all. Maybe it's the way I wrote in the URL or something, but I decided to simply just go as it is for now, as I do not think I will need pages taller/longer than the image is now.

Besides, I tested the method in different browsers with different results, so until there is a surer way, I will need to be more careful about slecting backgrounds for versatility!

Site in near final layout (just completing underlaying pages).

[navaldesign]

Re: Help with fixed backgrounds

Strange. The above works just fine in most modern browsers (doesn't work in old IE4 and so on)