• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

In need of simple (I hope) HTML help

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

d_colodny

Registered
Joined
Mar 26, 2007
Location
Connecticut
Ok, here's the deal:

I am making a websit that has a front page image that turns into a water mark for the pages inside - at least that's the hope.

Setting it up as a front screen image is easy - I just used

Code:
<table width="100%" height="95%">
<tr valign="center"><td align="center"><img ...
</table>
I found the scroll bar appeared if I used 100% for the height, so I reduced it.

I want to make it a watermark on the pages - that's easy. Just declare the background as a watermark in the body. Where it gets tricky is I want that picture to not repeat AND be centered on the screen both horizontally and vertically so it will appear centered at any resolution

Right now I'm using FrontPage and doing this a lot :bang head as well as tweaking the code manually.

FrontPage doesn't seem to like Firefox, I wonder why... :D

Any help would be great.
 
Have you tried placing the image in a <DIV> and setting the style="width:100%; height:100%; text-align:center; vertical-align:middle;" ?
 
Tacoman is on the right track. Setting it in a div tag might work... but what you're after is probably going to be addressed easiest by using CSS.

You can use CSS to position your background image on the page by %, pixel, or relative location (center, left, right, etc). Have a look here: http://www.w3schools.com/css/css_background.asp

That should get you started. CSS can be a very handy tool. ;)
 
Thanks Yellow, I tried Tacoman's suggestion, but found that the vertical-align just means the alignment with the text, not the position on the page. :bang head

An offline friend, and a fellow member of the forum here pointed me in the direction of Seamonkey, Mozilla's version of FrontPage - It makes optimizing code for FireFox easier. :thup:

If you're interested, the URL's here:

http://www.mozilla.org/projects/seamonkey


I found it to be a much faster browser than Firefox for some reason.

With the help of both of you and the resources provided by Malpine Walis offline, I was able to find the solution! :clap:

Code:
body
{ 
background: #000000 url('images/cloneserpents.jpg') no-repeat fixed center
}
That places a single picture, specified by the url, in the center of the screen as a fixed watermark.

Now to apply the style to all the other pages...Thank you.
 
Back