[magusbuckley]

Hello:

I have an image I'd like to use as a background for my website.

At first, I thought I would just put each web page inside a table and set the main table to 100% by 100% and use the image as the background. The problem is that the image tiled itself. I can't figure out how to set the properties of an image so it will just blow itself up to fill a monitor.

My second thought was to create a main table who's resolution is 1200 pixels high. Since the image WILL tile sideways, I could change the res of the photo to match the height of the 1200 pixel table and set the table's width to 100% and let the image tile sideways from there. The problem with that is that some of my web pages are more than 1200 pixels high.

If I just use the image as the background for the site's theme, it only gets tiled again.

Is there any way of doing this within FrontPage?

Any and all information will be greatly appreciated.

Thanks,

Magus

[Advertisements]

Magus:

If the image is not tileable (except sideways), you will have a hard time setting a background image height size for different screen resolutions and page lengths without a little extra work. Most of that work is to use JavaScript to "sniff" out the screen res and use a different background image of a different size for that screen res or to call out a different size by class for those pages of different lengths.

The only control when you use the background attribute for size is controlling the container size the bg image is used in. Otherwise, you have to use the img tag and percentages for width and height which eliminates the image as a bg image without some extra coding to make it work as a bg image with content over it. Usually this results in a less than fluid/flexible web page.

Hate to hear you are using FrontPage and tables.

Ron

[Major Payne]

Magus:

If the image is not tileable (except sideways), you will have a hard time setting a background image height size for different screen resolutions and page lengths without a little extra work. Most of that work is to use JavaScript to "sniff" out the screen res and use a different background image of a different size for that screen res or to call out a different size by class for those pages of different lengths.

The only control when you use the background attribute for size is controlling the container size the bg image is used in. Otherwise, you have to use the img tag and percentages for width and height which eliminates the image as a bg image without some extra coding to make it work as a bg image with content over it. Usually this results in a less than fluid/flexible web page.

Hate to hear you are using FrontPage and tables.

Ron

[magusbuckley]

Ron:

Thanks for the reply.

If the solution to my problem is Javascript and multiple pages for each possible resolution, I'm afraid I won't be able to pull it off because it would take me FOREVER to create web pages for each possible resolution.

The image I have is a vector image. Maybe I could blow it up really big, save it as a .jpg and use that as my background. Most of the picture would spill off the screen, but that's OK. It's just honeycombs after all.

Yeah, I know FrontPage is the WYSIWYG approach to building web pages. I just never learned anything else...not even CSS. What's the new thing out now, how much does it cost, and how difficult would you say it is to learn for a seasoned tech and former programmer?

Thanks,

Magus

[Major Payne]

Magus:

If that image can be sliced and diced in a way to make it a tileable image, then you would be good to go for a good background image. How about sending it to me and I'll see what I can do with it. Making it tileable will eliminate a lot of your problems for all pages.

They are still pushing Dreamweaver which I think writes lousy code. Especially the CSS code. Lot of it does not meet XHTML 1.0 Standards. If you want a WYSIWYG Editor, you should try NVU. It will get you away from that bloated Microsoft code FrontPage generates and the FP extensions required on some servers.

There's no better time to learn HTML and CSS at least. New standards are acoming. HTML 5.0 and CSS3 are on the way. Most people don't care one whit about having proper code written for their pages which makes a lot of their pages look bad in different browsers. Especially when the browser gets kicked into Quirks Mode.

Ron

[Major Payne]

Magus:

Haven't received your image so maybe you could try this:

The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/bod

Or another way if image can be made tileable with a graphics program or you can use inside a div container:

Div BG Image and Text

Ron

Edited by Major Payne, 03 June 2008 - 11:55 AM.

[magusbuckley]

Ron:

Sorry for the delay but I was busy yesterday and am at work right now. I can tell you, though, that the image can only be tiled horizontally, not vertically. Still, I'll send you a copy sometime this evening after I've gotten home.

I may have to try some of that other code you were mentioning.

I'll post later today.

Thanks,

Magus

[Major Payne]

OK. No problemo. Let me have the link to one of your pages you are trying to get this to work with and I'll see what I can do.

Ron

[magusbuckley]

Ron:

My site is -

Cyberhive

and a sample of the possible background image can be found at -

Possible Background

Thanks,

Magus

Edited by magusbuckley, 04 June 2008 - 07:11 PM.

[Major Payne]

Got 'em. You want the image behind the blue content I take it for all pages?

Ron

[magusbuckley]

Ron:

You got it. I'm trying to replace the white background.

The table that the content sits in is designed to fit a screen resolution of 1024. My buddy, who has a widescreen monitor, told me that all that white space on the left and right of the table looked horrible at his house.

The table, featuring green and blue, will sit on top of the background I provided the link for.

Thanks for your help this far.

Magus

[Major Payne]

Since your pages are gonna scroll, I did your bg this way: Background

I don't have the paths to your images, etc., so page appears bare except for content and bg image.

Added a bunch of nonsense at the bottom of this page to see if it would still be ok with longer content: Background2

Ron

Edited by Major Payne, 04 June 2008 - 11:57 PM.

[magusbuckley]

Ron:

Sorry for the late reply. I was off today and had bowling with my league this evening. It's after eleven now and I'm just getting to my e-mail.

At any rate, I have followed the links you sent and it looks FANTASTIC! What you set up will work great.

Now...fill me in on the secret. Or should I just check the source code from one of your links?

Thanks buddy...it looks like you're going to take me to the finish line with this project.

Thanks,

Magus

[Major Payne]

Attaching index.html as a zip file for you although you could use the code from the online page. Glad it will work out for you. Like that bg image.

The code I use mostly is this which can be put on an external css file for all pages without the style tags:

<style type="text/css">
body, html { width: 100%; height: 100%; }
body {  background: url(images/Honeycomb_Background.jpg) repeat-x center fixed; }
</style>

Ron

[attachment=21299:index.zip]

[magusbuckley]

Ron:

I haven't had time to play with your code yet, but did some more testing while on break at work. I changed my resolution on a 4:3 monitor to 1600 x 1200 and pulled up the samples you provided.

When I look at the code and then the sample, something just doesn't add up. In the sample, at that high resolution, the image tiled across the page and didn't stretch from the top of my screen to the bottom. According to your code, the image should have filled the page, without tileing, 100% in both directions.

Maybe I'm not understanding what that code does exactly.

In addition, I don't know anything at all about CSS so I'll most likely have to make some changes to the code so I can just embed that into each page. It won't be a huge task becuase I don't havee too many pages.

So, what do you think about that 100% thing?

Thanks,

Magus

[Major Payne]

Hi:

I can't test any higher than 1280 by 1024 and it works and looks fine at that res. My actual height is only 713px unless I close some of the top tool bars. I didn't intend for the image to stretch as it is not set to do that. It will ensure the page is 100% by 100%, but the image is only 800px high.

If you want this for the more uncommon resolutions, then I'll have to rework the code to see if I can actually stretch the height. Either that or increase the height of your current tileable image past the expected resolution you expect people to use.

Ron

Edited by Major Payne, 08 June 2008 - 06:53 PM.