Adding image as header background to top of page banner

38 views
Skip to first unread message

bwallum

unread,
Jan 26, 2009, 6:38:36 PM1/26/09
to TiddlyWiki
Hi, Sorry to come up with such a basic question but I'm getting
nowhere. I've taken out the gradient and added the image but only get
a change in font and a blank background.

Could somebody put me right please. The mess can be viewed at
http://www.ettrickvillagehall.org/Events.html

The image is on the server at http://www.ettrickvillagehall.org/wp_images/newheaderfaded.jpg
and appears to work ok. Do I need to set the image to a particular
pixel size? It's currently 1200 x 140 deep. Also, can I use a png
image instead of a jpg (to preserve the alpha transparency)

Thank you
Bob

Mark S.

unread,
Jan 26, 2009, 7:32:41 PM1/26/09
to TiddlyWiki
I'm sure someone will be along who knows what they're talking about,
but until then ...

The PageTemplate tiddler doesn't have a div with class header. If I
put this:

<div class='header' style='background:url("http://
www.ettrickvillagehall.org/wp_images/newheaderfaded.jpg") repeat-x top
left;top left;'>

right above

<div class="headerShadow">

it looks pretty good on FireFox 3. The shadowing doesn't look quite
right on IE, but maybe that's normal ... or someone will have a fix
for that.

-- Mark

On Jan 26, 3:38 pm, bwallum <r...@btconnect.com> wrote:
> Hi, Sorry to come up with such a basic question but I'm getting
> nowhere. I've taken out the gradient and added the image but only get
> a change in font and a blank background.
>
> Could somebody put me right please. The mess can be viewed athttp://www.ettrickvillagehall.org/Events.html
>
> The image is on the server athttp://www.ettrickvillagehall.org/wp_images/newheaderfaded.jpg

bwallum

unread,
Jan 27, 2009, 5:58:44 AM1/27/09
to TiddlyWiki
I think you know what you're talking about, it worked thanks. IE does
render it slightly different to FF but I think its acceptable. Great!

Is there a way of stopping it repeating? I would have liked to fade it
to the white background, so that on widescreens it looked more like a
left aligned flag.

On Jan 27, 12:32 am, "Mark S." <throa...@yahoo.com> wrote:
> I'm sure someone will be along who knows what they're talking about,
> but until then ...
>
> The PageTemplate tiddler doesn't have a div with class header. If I
> put this:
>
>   <div class='header' style='background:url("http://www.ettrickvillagehall.org/wp_images/newheaderfaded.jpg") repeat-x top

FND

unread,
Jan 27, 2009, 7:23:15 AM1/27/09
to Tiddl...@googlegroups.com
I'd take a slightly different approach; instead of putting the CSS code
into PageTemplate, I'd add them to StyleSheet:
.header {
background: transparent url(img.png) no-repeat scroll top left;
}
(note the "no-repeat" setting)


-- F.

Mark S.

unread,
Jan 27, 2009, 9:40:03 AM1/27/09
to TiddlyWiki
Yes, I'm sure that's the right way to do it. Except that Bob's page
didn't have *any* <div class="header"> markup at the top of the
PageTemplate tiddler -- he'll need that in order for the style to kick
in.

I imagine your settings even fixed Bob's repeat problem, though
apparently I'm still living in the last century, and don't have enough
screen real estate to see any difference.

So Bob, was it always "Boston" ? Or did Boston have some meaning in
old English? I'm surprised we didn't call our Boston "New
Boston" (like New York, New Hampshire, New Jersey ...). We have a
Scottish Rite hall here that gets rented out for various events. Yours
looks more interesting.

-- Mark

bwallum

unread,
Jan 27, 2009, 4:31:51 PM1/27/09
to TiddlyWiki
Yes its always been Boston. The hall is 100 years old this year. I'm
charged with getting a replacement hence the web effort at the moment
with surveys and the like. It was named after Thomas Boston, a fire
and brimstone preacher! Thankfully all that's over now and we use the
hall for quite a few things, as the What's On section is now beginning
to show...now that you got me moving on the header bit. I'll try the
StyleSheet route as I've heard it's better to put tweaks in there to
avoid issues during upgrades.

I took out the whole <div class... line when I removed the gradient
(I'm no coder as you may well imagine).

What exactly do I need in the PageTemplate to make the above
suggestion work? (i.e. modify the StyleSheet as suggested)

There's a bit of history and some pictures on the hall if you are
interested.

http://www.ettrickvillagehall.org/about.html.

If your hall does similar things maybe we could swap notes.

Regards
Bob

On Jan 27, 2:40 pm, "Mark S." <throa...@yahoo.com> wrote:

> So Bob, was it always "Boston" ? Or did Boston have some meaning in
> old English? I'm surprised we didn't call our Boston "New
> Boston" (like New York, New Hampshire, New Jersey ...).  We have a
> Scottish Rite hall here that gets rented out for various events. Yours
> looks more interesting.
>
> -- Mark

> > -- F.

bwallum

unread,
Jan 27, 2009, 5:12:23 PM1/27/09
to TiddlyWiki
It's ok I sorted it with everybody's advice and a little
experimentation. Thanks a lot! Really helpful.

Kind Regards
Bob
Reply all
Reply to author
Forward
0 new messages