PDA

View Full Version : Frontpage 2002 background graphic



karent
22-04-2004, 07:31 PM
Can someone please tell me how to stop the background picture on a web page from tiling? I want the image to appear behind the text elements on the page as a sort of "watermark" background. Also, is there any way to make the white space around a graphic transparent on a web page, i.e., it lets the background show through? Thanks.

mejobloggs
22-04-2004, 09:51 PM
Upload a page so we can look thanks. I need to look at things.

stu120404
22-04-2004, 10:17 PM
> Can someone please tell me how to stop the background
> picture on a web page from tiling? I want the image
> to appear behind the text elements on the page as a
> sort of "watermark" background.

As far as I am aware you cant, the only way you can stop that is by using tables or making the text/& or the content of the page smaller, in till the image stops tiling (& you have to do this even if you are using tables as well), I hope that makes sense, if not post back here :)

>Also, is there any
> way to make the white space around a graphic
> transparent on a web page, i.e., it lets the
> background show through? Thanks.

Have you tried saving the image as a *.gif? Or as a transparent gif?

Noel Nosivad
22-04-2004, 10:50 PM
Hey karent,

There are a few ways of doing the watermark.

JavaScript and CSS are the ones I know of that can allow this watermark type image in the background, just remember to not make the watermark a colour that'd make it hard for the readers to read content over the top of it.

The white space around a graphic transparent, if it's a PNG or GIF file you can just remove the whitespace and save as a transparent image. There's another method, but it's more web savvy which is done through the scripting language, it's possible the best method but requires a lot to be done for it to work how you want it.


Noel Nosivad

Rob99
23-04-2004, 12:06 AM
Edit the graphic you want as the background and make it 1020px wide, it will still tile as you scroll down the page tho.
You need to use DHTML if you require a proper water mark that sits in the middle of the page regardless of how big the browser window is or whether the page is scrolled.
This link should be what you are after.
http://www.dynamicdrive.com/dynamicindex3/fixback.htm

Rob

mejobloggs
23-04-2004, 12:07 AM
http://bloggsworld.orcon.net.nz/test/kane/watermark.html

Like that?

mejobloggs
23-04-2004, 12:07 AM
My one is better, it doesnt tile.

mejobloggs
23-04-2004, 12:11 AM
Eh? for that javascript one, it will not tile. Makeing a picture 1000px wid is not advisable.

The css one I did will not tile, and sit in the middle of the page, with a small image, and you can write on top of it also. In fact, it does not have to be in the middle, it can be anywhere on the screen you want.

mejobloggs
23-04-2004, 12:17 AM
> > Can someone please tell me how to stop the
> background
> > picture on a web page from tiling? I want the
> image
> > to appear behind the text elements on the page as
> a
> > sort of "watermark" background.
>
> As far as I am aware you cant, the only way you can
> stop that is by using tables or making the text/& or
> the content of the page smaller, in till the image
> stops tiling (& you have to do this even if you are
> using tables as well), I hope that makes sense, if
> not post back here :)
>
> >Also, is there any
> > way to make the white space around a graphic
> > transparent on a web page, i.e., it lets the
> > background show through? Thanks.
>
> Have you tried saving the image as a *.gif? Or as a
> transparent gif?



Eh again? Have I misintepreted the requirements? Our native dreamweaver guru can not do it?

jokes stu ;-)

Bye the way, that is what you want isnt it?

mejobloggs
23-04-2004, 12:21 AM
> The white space around a graphic transparent, if it's
> a PNG or GIF file you can just remove the whitespace
> and save as a transparent image.


I don't think IE supports transparent PNG's yet. At least, not last time i tried (last week?)

Sorry, I am making a complete mess with my postings. I will probably post a few more if I remember ay?

Stick this in your <head> section

<style type="text/css">
body {
background: url(images/home.jpg) no-repeat fixed center center;

}
</style>

Rob99
23-04-2004, 12:34 AM
Or this just after the <body> tag

<script language="JavaScript1.2">
if (document.all||document.getElementById)
document.body.style.background="url(images/background.jpg) white center no-repeat fixed"
</script>

Its up to you which you like the best.

As with transparent background a GIF file would be the one I'd chose.

Rob ;)

karent
23-04-2004, 07:00 AM
Hey guys. Thanks for your suggestions. I really like that "moving" watermark thingy. It's not what I was originally after - it's better. I'll give it a try. I suspected that as far as the background image idea was concerned I would be constrained to working with tables. If I end up doing it that way, will it appear the same on-screen regardless of screen size if I make the table size 100%? As for posting the page here, how do I do that? It's only at the early development stage.
And MJB, I notice you're with Orcon. I'm interested in their free hosting service. Will they allow personal web pages to include video clips as well as photos?
Thanks all.

Greg S
23-04-2004, 09:06 AM
Hi Karen. First of all, your background image will always tile - the secret is to get it spaced correctly so that it appears only once in the average screen size of viewer's monitors.

There are, as mentioned a couple of ways to get the effect, called a watermark. First is in Frontpage, choose your background image and click on the Watermark checkbox. if you're coding the page yourself, the tag is simply:

<body background="images/background.jpg" bgproperties="fixed">

Another good way is to use javascript. You can copy a script from here (http://www.dynamicdrive.com/dynamicindex3/fixback.htm) with easy instructions.

Remember that both those options won't work in some browsers... they're IE specific.

Regarding the transparency you want... as mentioned it needs to be a gif (or png) created with a transparent background, or manipulate the background into transparent using a good image manipulator such as Photoshop.

Greg S
23-04-2004, 09:11 AM
oops Rob already gave the dynamicdrive address. JoeBlogg's css script works for Netscape too, so I think that's the best.

Re Orcon, yes you can put almost whatever you like on their free hosting service, but remember you don't get much space so a vid clip might not fit

Greg S
23-04-2004, 09:20 AM
> As for posting the page
> here, how do I do that?

just type in the url, or if you want it like here (http://www.pressf1.co.nz) then look at the formatting options (http://pressf1.pcworld.co.nz/format.jsp)

Susan B
23-04-2004, 10:00 AM
> If I end up doing it that way, will it appear the same on-screen regardless of screen size if I make the table size 100%?

If you use CSS to position a graphic on a page it will remain in that place on the page regardless of the window size. Be careful where you position things because sometimes they can run off the page if it is made larger or smaller with changes of more or less content. It pays to check the final result prior to uploading. ;-)

Greg S
23-04-2004, 10:07 AM
> If you use CSS to position a graphic on a page it
> will remain in that place on the page regardless of
> the window size. Be careful where you position things
> because sometimes they can run off the page if it is
> made larger or smaller with changes of more or less
> content. It pays to check the final result prior to
> uploading. ;-)

That's a great tip Suzie Bee. And on that note I recently discovered a cool script to check how your page views at different screen resolutions:

javascript:resizeTo(1600,1200)

Just paste that into your browser's location bar, and change the dimensions to whatever size youwant to check. Works in IE and Netscape 7.02, but not sure about other browsers.

karent
23-04-2004, 10:09 AM
Hi Greg. I get "this page contains elements that need to be saved or published to preview correctly". Obviously I have saved the page, but I guess it isn't "published"(?). I am using a theme from FP 2002. Was that a mistake? It's just that I'm fairly new at this (surprise!) and I like the look of the template I chose. I had intended to bastardise it to suit my purposes more though. I pasted that javascript into the html as described but I can't see any image. Is that something to do with using a preset theme? My website will be nothing flash. Just some pages to hold pics, etc., of my daughter (she's 2 1/2). All the images I have used/intend to use are gifs. Thanks for your help so far. Regards. :)

mejobloggs
23-04-2004, 10:11 AM
You mind adding me to your msn, so we can talk?

m; e; j' o bloggs <at} hotmail

Yes, my pressf1 username @hotmail.com. Take out the commas etc.

Greg S
23-04-2004, 10:14 AM
Not sure why you're getting that error, and maybe it is because it's not uploaded to a server (though I kinda doubt it). Feel free to email me with the site files as an attachment and I'll give it some undivided attention. (skip the photos - just send the .html file/s

hotdog at forcenz.com

mejobloggs
23-04-2004, 10:15 AM
> > If I end up doing it that way, will it appear the
> same on-screen regardless of screen size if I make
> the table size 100%?
>
> If you use CSS to position a graphic on a page it
> will remain in that place on the page regardless of
> the window size. Be careful where you position things
> because sometimes they can run off the page if it is
> made larger or smaller with changes of more or less
> content. It pays to check the final result prior to
> uploading. ;-)


What, you mean it will always stay in the exact center of the page, no matter how big it is? Well, you can change that if you want, just put pixel values in, and keep it somewhere in a set position then.

Susan B
23-04-2004, 11:22 AM
> What, you mean it will always stay in the exact center of the page, no matter how big it is? Well, you can change that if you want, just put pixel values in, and keep it somewhere in a set position then.

No, I didn't say it had to be the exact centre of the page. The reason I gave that warning was because I made some pages with a fixed graphic and because some of the pages are larger than the others the graphic doesn't fit properly on the smaller pages and is not entirely visible on them.

Could overcome that with a different CSS class for that element but I haven't done it yet.

Like you say, you can place the graphic wherever you wish with pixel values. :-)

Rob99
23-04-2004, 03:43 PM
http://www.dynamicdrive.com/dynamicindex4/logo.htm
;\

mejobloggs
24-04-2004, 09:56 AM
Ok, now that is a good one. Making it dissapear after 10 seconds or so. Neat.