HTML Help

danny_d · Joined: 13 Oct 2009 Posts: 10

Hi everyone,

Just a basic question...

I'm trying to get a fixed background image on my web pages, but nothing seems to work. I've search around and I keep seeing the same response Code: <BODY BACKGROUND="MY_IMAGE.jpg" BGPROPERTIES=FIXED> or

Code: <BODY BACKGROUND="MY_IMAGE.jpg" BGPROPERTIES="FIXED">

...The backround still scrolls with the text...

I'm a real noob at this, I'm doing a quite extensive web page(maybe 100 or so pages)in microsoft Publisher 2007. It's all very basic but it suites my purpose.

Heres part of the code where I've already added a backround in publisher, now I only need it to fix it in place. What do I need to change here?

Code: <body link="#0066FF" vlink="#6633CC" bgcolor=white
background="index_files/image1180.jpg" style='margin:0'>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

First, MS Publisher is NOT a web editor and you will be making 100+ pages non-cross-browser compatible. Publisher, Word and even the so-called web editor FrontPage insert Microsoft specific Schema in your pages which only IE and related IE engine driven browsers (Maxthon) understand.

With 100+ pages in the making, you WANT to use an external CSS file for all your pages. For your background on a page which is not a tiled image and is to be used for the body tag, the following is an example of what the CSS file will have on it:

Code: body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to bg image) no-repeat center fixed;
}

Of course, the actual page size depends on bg image and whether you have a "border" area around it.

You will also need to move your links to the CSS. Inline CSS is not proper. Especially for 100+ pages.
Code: a:link { color: #009900; }
a:visited { color: #999999; }
a:hover { color: #333333; }
a:focus { color: #333333; }
a:active { color: #009900; }
Order of links is important. The above is just an example. There are many CSS properties that can be used with the links.
-------------------------------------------------------
Editors:

Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders:
http://www.thefreecountry.com/webmaster/htmleditors.shtml#htmleditors
HTML Editor Reviews - http://www.wdvl.com/Reviews/HTML/
Free Online Editor Tool: http://htmledit.squarefree.com/
Free Flash Website Builder (Online): http://www.wix.com/
PageBreeze (Free visual (WYSIWYG) and HTML tag/source modes): http://www.pagebreeze.com/

Serif WebPlus SE: http://myrtc.blogspot.com/2009/08/review-serif-webplus-se.html
Download Trellian WebPage (Free): http://www.trellian.com/webpage/download.htm
WebSketch: http://www.websketch.com/
Create a free website with Jimdo!: http://www.jimdo.com/
Notepad++ (Free source code editor and Notepad replacement that supports several languages): http://notepad-plus.sourceforge.net/uk/site.htm

Why Validate?: http://validator.w3.org/docs/why.html

CSS Tutorials:

http://www.w3schools.com/Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss

http://htmldog.com/guides/cssbeginner/
http://www.davesite.com/webstation/css/
http://www.htmlcodetutorial.com/character_famsupp_193.html

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

How to Make a Webpage:

Full Web Building Tutorials: http://www.w3schools.com/
The Web Book (free): http://www.the-web-book.com/index.php
Beginner's HTML Tutorial: http://www.htmlbasix.com/
How to Create a Webpage: http://www.make-a-web-site.com/
So You Want To Set Up Your First Site, Huh?: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561

http://www.w3schools.com/site/default.asp
How to Start / Create Your Own Website: The Beginner's A-Z Guide: http://www.thesitewizard.com/gettingstarted/startwebsite.shtml
So, you want to make a Web Page!: http://www.pagetutor.com/html_tutor/index.html
Getting started with HTML: http://www.w3.org/MarkUp/Guide/

Creating your first website – Part 1: Setting up your site and project files (Adobe CS3/4):
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html

danny_d · Joined: 13 Oct 2009 Posts: 10

Thanks for the info, but as I said, I'm a beginner so I need some "dummy instructions", that is, you need to hold my hand and tell me what to do...

My project is almost finished, just adding some finishing touches on it and the fixed background would be one of them. It's not a big deal if I dont get it, but would be nice.

Also I've checked that my pages work fine with FF and IE, I'm betting that would cover 90% of users.

If theres an easy way of doing this, would be much appreciated if someone could help me with this. I'm guessing it's only short script I need to add...if not, I'll let it be the way it is

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

Don't know what you mean by an easy way. The external CSS file IS the easiest way. You are asking for a lot of trouble if you don't use one.

What do you mean by a short script? You do not give details which allow us to help.

danny_d · Joined: 13 Oct 2009 Posts: 10

*double*

danny_d · Joined: 13 Oct 2009 Posts: 10

Hey thanks! Can't believe I got it working...well almost.
Used your example and the link example here.
http://webdesign.about.com/od/css/a/aa051203a.htm

Theres just one problem. I can only get the background
on the first page. Theres an avarage of 15 pages or subpages on every file (sorry I dont know the terminology here)

Maybe the problem is with the with link:
Code: <link href="mainstyles.css" rel="stylesheet" type="text/css" />

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Did you put that link on every page? Pages do no inherit from page to page.
Did you remove the inline styles and leave just the body tag? Inline styles will trump out external styles and may be conflicting so that nothing works.
Code: <BODY BACKGROUND="MY_IMAGE.jpg" BGPROPERTIES=FIXED>

Code: <body>

Are you using a doctype declaration? If not pages may be parsed incorrectly.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

In addition to what Sticks said about CSS link being on every page, you will have to adjust the relative path for the CSS file for files in other folders from where CSS file is stored.

Recommend you do NOT use embedded/inline styling unless absolutely necessary for one or two pages. Also, recommend that you type ALL tag, attributes, folder and file names in lowercase. Do NOT use compound names for folders and file names.

leahmarie · Joined: 04 Aug 2009 Posts: 29

I think you can set your background fixed in CSS. you can put an attribute background is equals to fixed

danny_d · Joined: 13 Oct 2009 Posts: 10

Ok, thanks. I got it working now.
Didnt notice that every page had its own file.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

You're welcome. Always nice to hear that a solution was found.

danny_d · Joined: 13 Oct 2009 Posts: 10

Hi again,

I added a google search on my page but it
conflicts with my background.
I can't click on the google search when I use the background.

Heres the link I use

Code: <link href="http://www.mypage.com/mainstyles.css" rel="stylesheet" type="text/css" />

Heres the the External CSS file

Code: body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(http://www.mypage.com/background.jpg) no-repeat right fixed;
}

Any ideas what I need to change here?

danny_d · Joined: 13 Oct 2009 Posts: 10

*double*

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Nothing. A background will in no way interfere with your search code.
Do you have a live link

danny_d · Joined: 13 Oct 2009 Posts: 10

Sorry no live links yet.

Well somethings happening, when I remove the link to the external CCS file the search bar works fine.

Maybe I should add that I'm using MS Publisher.
I dont know if web designer have any exprince with it...

I simply use the "HTML code fragment" to add the script...Maybe it positions the code in the wrong place.