Fixed Background HTML Code Script Instructions + Samples by Brownielocks

Fixed Background HTML Code, Instructions, Tips, Directions for most page editors + WebTV
I've got a code that works for IE, Netscape, Mozilla and Opera now also.

What is a Fixed Background? Most people don't consider the background fixed, instead they view it as the text or images scroll by. In truth...

With some of our watercolor scenes, you 'might' prefer to have your contents scroll rather than have the backgrounds move and show a divisional line?

Note: Not all webpage makers/editors or browsers will do this. But, if yours does, here is how you code in HTML to make it happen for your page:

1. If you use "Frontpage" then when you insert your background image, also click on "Watermark." This codes in the HTML to make the background fixed.
(Don't ask me how "watermark = fixed" but I've given up trying to find logic in html codes!)

2. If you're not using FrontPage, then check with your editor to see if a one-button click makes this happen.

<body style="background-attachment: fixed; background-repeat: no-repeat;" background="xxx.jpg">

(We are using background-attachment: fixed on this page because it works with the code to center the background
on the screen regardless of what monitor it's viewed on.)

RE- SIZING for Different Monitors : 5/6/07

I've been informed on the newer, larger monitors my backgrounds are repeating horizontally. This looks really tacky, especially if they're scenes. It's very hard to design art to fit all monitor sizes, 18", 19", 20" 22" etc.

So, I'm coding mine to just "center on the screen" regardless of the monitor size.
This means, the larger screens will have some white edges. But at least you won't get the images or designs repeating on you.

The code to do this is as follows: (place in <head> area)

For Normal Page

For a Fixed Background
(or to scroll)

body

{background-image:url("IMAGEFILE/NameofImage.jpg");

background-repeat:repeat-y;

background-position:top center;}

</style>

body

{background-image:url("IMAGEFILE/NameofImage.jpg");

background-repeat:repeat-y;

background-position:top center;

background-attachment:fixed}

</style>

Also, you can use animations with a fixed background.
We used a java script that made falling snowflakes, over our Fixed Background for one of our Christmas Trivia topics.

And I've inserted midi's on fixed background pages.

Here are some other samples:

1. How to Talk Like A Minnesota Person ;) - (Simple Fixed Background)
http://www.brownielocks.com/minnesotatalk.html

2. Halloween Fun - (Animated Java Script with Fixed Background)
We used the same falling snow java script on Christmas Trivia but changed the image
to flying bats and falling leaves instead.
http://www.brownielocks.com/Halloween.html

http://www.brownielocks.com/arborday.html

http://www.brownielocks.com/golfjokes.html

http://www.brownielocks.com/wildrice.html

We've made more pages that have scrolling, but I don't want to you think I'm sending you
all over my site as some kind of promotion! <wink>

Because these backgrounds use so much storage.
It is impossible for me to offer the same image in several sizes to fit all your website needs.
And, if you're like me, you don't know if you'll make a
page fixed until the last minute! ;)

How To Resize a Background Image?

I resize my images (when necessary) in Paint Shop Pro.
This allows them to be resized PROPORTIONALLY with the image.

But, if you do not have a graphic software program that will allow you to resize an image, then I'm afraid the only way you can do it is to do it with
html code sizes for your images "height" and "width."
This *might* not work for all page editors!

Example: Original Background is Width=800 Height = 500.

In the code you change the numbers to be Width = 780 Height = 450.
This will make it fit the screen, but I sure hope it doesn't distort my
artwork? If it does, I prefer you do your best to not resize.

Final Tip: Bookmark this page!!!
If you haven't before you should get our Icon.
You'll probably create more than one page on your site
(like me) with scrolling text as it grows.
So, you'll need to remember where you got the information.

According to my site stats, I'm getting some visits from people using WebTV.

I'm not too familiar with it. But I have had some people write me about using my backgrounds on WebTV and in their email.

All I can tell you is what I was told. And, what I told them.

1. The rules are the same for WebTV as any other.
A credit MUST be given whether my backgrounds are used in an email
or on a website.

2. Images for WebTV need to be sized to 544.
I am sorry but I can't redo all my images and resize them for you. :(

3. The code for making a fixed background in WebTV
(if you find one that fits) is as follows:

As I was told the key words are: "nohtilebg novtilebg"

Here is how it should be coded:

<body bgcolor="#123456" text="#AAAAAA" link="#BBBBBB" vlinks="#CCCCCC" vlink="#DDDDDD" background="watercolorsample.jpg" nohtilebg novtilebg>

If you are new to HTML code, just remember that all the color codes followed by the # are 6 digits and letters
(or a combination). If your code is less than 6, it won't work. Examples:
Off White=#EEEED2
Light Pink= #FFDDED
Pale Yellow = #FEFEDE
Light Brown=#E6C4AE
Light Mint=#E9F9EC
Light Lavender=#F5D9FF
Light Turquoise =#DOF7FA
Flesh=#FEDCC6

Where did I get those? From my Paint Shop Pro art program. Every color on the chart is given it's HTML code number.

I hope this helps?

My stats also show that I'm getting a little smidge of hits from a browser called "Solaris"?

As of right now, I have no clue what that is or any tips for you.
I apologize.
It's difficult to be sizeable for all systems in the US and foreign.

What is this? It's a Javascript that you place between your <head> and </head> of you HTML.
It makes the text and images scroll all on their own.
It's a great effect with a fixed background.
Or without one.

If you wish to visit our main site, click here!
(See you can have animated gifs also on fixed bg's.)




		Search results take a few seconds and open in a new window. May need to allow Pop Ups to see results.


All graphics on this site (still & animated) have our embedded watermark. They are not public domain!	All contents (Graphics and Text) are covered by U.S. Copyright Laws. No reproduction of any kind, downloading, copy, paste, save, etc. is allowed. All rights reserved!