Adding a background in html

[Kileandra]

Hi,

I hope I'm posting this in the right place :]
I have a (little) question; well, I hope it is, as my coding knowledge is pretty low, to almost non-existent :puzzled:

I'm trying to implement a background image in HTML to be seen beneath my .swf. Untill now I've always used .jpeg's that were right on size with the flash-site I was creating, usually faded round the edges so it would flow into a plain color. But, I'd really love to know how to create a background that is actually bigger then my actual size.
If I try that in flash, I get scrollbars once it published, and that is not my goal. So, my guess was that the answer must lie in adding a background image in HTML. But, how do I go about doing that?
I tried a few things, like adding an image and a swf in GoLive, but it ends up in no image showing, only the swf. So, if anyone can point me in the right direction, I'd be really grateful :]

I think you all already know what I mean, but here are a few sites that show what I'm looking for. I want a larger jpeg bg (or .png/.gif, what is usually used?), but create the site itself in flash :smirk:

http://corvusart.com/
http://www.jeremyzevin.com/
http://www.blog.spoongraphics.co.uk/

Thanks in advance!

~ Kim

[.soulty]

You are correct, all you need to do is first create a graphic that can tile (repeat without noticeable edges) in your graphics application then save this out as either gif, jpg or png.

In your html/css create a css properties for your 'body' tag to contain a image for the background. Then set this background image to be 'center' and 'repeat-x'.

For best results you could also make your flash background transparent but depending on your movie's complexity/and size that may cause strain on 'older' processors/pc's.

[3dy]

You can use a pattern or you can read this:
http://css-tricks.com/perfect-full-page-background-image/

[Kileandra]

Thank you, both! That really helped me out! :D

I've been playing around with the files from the external link you gave me 3dy, and this is the result:

http://lynnslijkhuis.siuhkyls.com/

The .jpeg image is on it's largest 24", which can scale accordingly to the browser size. The white file in the center is the .swf, which shows my desired web-size and will be made transparent in the final version.

This is how it looks on my 20" widescreen: http://img186.imageshack.us/img186/3328/screentest.jpg

I've got a little favor to ask; do any of you have IE? Can you test how it looks before I continue?
And another thing; no matter what system you use, how quickly does the image/site display? I'd really like to know :smirk:

Again, thanks a ton!

~ Kim

[3dy]

Well... I'm on Mac, but I accessed Adobe Browser Lab and that's what I saw: in IE6 the background image is shown on the top of the page, not as a background of it. Crap.

In IE8 it's Ok, though.

[Kileandra]

That is... seriously annoying. I already had the feeling things were going "to easy". Is IE 6 still used a lot?

Thanks for taking a look :]

[3dy]

IE6 is used by 9.19% of people, according to the lying analytics of W3C.