Thanks Tobias,
I tried that out and it certainly does fill out the whole area, but I
prefer the image staying still behind the scrolling page. I ended up
sticking with my original "body { " in the stylesheet and just
enlarging it, and tweeking the tiddler column with to match properly "
width: 74.5%;" Here's what it looks like now:
http://theglassatlas.tiddlyspot.com/
I was mainly trying to get a background picture I liked and matching
the colors from it to the color palette. This stage was just getting
the picture in the right place and size.
Can I see the link of the website you did for your friend?
Thanks again both of you :-)
On Sep 6, 6:08 pm, Tobias Beer <[email protected]> wrote:
> Hi Dave,
>
> Since I belive I've done just that for a website I created for a
> friend of mine, here's how you do it:
>
> If you want to stretch the background image to the window size
> whatever that may be for the current viewport, put this into your
> MarkupPostBody:
>
> <img id="pagebg" src="bg.jpg" alt="" />
>
> ...and this into your StyleSheet:
>
> #pagebg {width:100%;z-index:-1;position:absolute;top:0;left:0;width:
> 100%;margin:0;padding:0;}
>
> Preferably you might want to consider adding a gradient to the bottom
> of this image in your preferred photo-editor and then set your body
> background color to that last pixels color, so assuming your
> background image would end in a row of white pixels you'd also add
> this to your StyleSheet:
>
> body{background:white;}
>
> Essentially, the trick is not to use a background, but instead to use
> the z-index to place a stretched image behind everything else. Make
> sure however that it's of decent quality with at least maybe 1024x768
> pixels.
>
> Cheery, Tobias.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/tiddlywiki?hl=en.
