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.

Plus some Samples of Pages We've Created.
Includes Animation!

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...

Fixed BG's Do Not Move.
Only the text (and images) will scroll by.


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:

Directions and Tips!

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.

3.  Or...after your background image HTML  insert this:

<background="fixed"> or

<bg properites="fixed"> or

<body background="xxx.jpg" behavior="fixed">

Our background sample is our "onefieldflower.jpg"(not resized)

4.  This code  works best for Netscape, Mozilla and Opera...

<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

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)

<style type="text/css">




background-position:top center;}


<style type="text/css">




background-position:top center;




Also, you can use animations  with a fixed background.
At  times I've made my homepage with a fixed background and also had some animation links on it.

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)

2.  Falling Snowflakes - (Animated Java Script with Fixed Background)
We used the same falling snow java script on Arctic Winter Games .

3. History of the Yaqui Easter Ceremony.  (Animated Java Script with Fixed Background)
We used the same falling snow java script but replaced snowflakes with poppy flowers.

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.

What about WebTV?

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

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.


Auto-Scrolling or Self-Scrolling 

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.


I made a sample page.  


Impressed with how this works?  Forgot to get the code?
Go to our "Auto-Scrolling Code page."

Return to our "Watercolor Backgrounds Page."

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

Share Brownielocks & The 3 Bears Fun with a Friend!!!

All graphics on this site (still and 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!

digimarc icon

Like Brownielocks on Facebook Facebook logo

Thanks for Visiting. We love you!      Brownielocks store link image
Brownielocks' Holidays & Fun For Everyone!  1999-2017