Simple Machines Community Forum

Hi, everybody knows you can set a background picture on a site. But is it also possible to add a foreground picture? By this, i mean a single non-repeat picture on your site and fix its position? So, if you scroll, the picture stays on the same position, and all the text comes behind that picture...

Hope you understood...  ;)

Thx
Cadish

like this one: here! (http://www.dynamicdrive.com/dynamicindex4/logo.htm)

Yeah, that's what i mean...

But,  :-\ is it possible to fix it really? Right now, you can see that the image is moving...
I know, i'm demanding much... but my site has to be spotless... ;)

I think you understood me correctly...

Just let me know if you know this trick, and i will be indefinitely grateful ;)

I *really* hate the way that jumps, lol. Would annoy me if I had to browse a site with one of those on.

If you want a BG image, you can fix that to the page with CSS, just go with BODY {background-attachment: fixed}

Yeah, i know, but it has to be a foreground image... ::)

I remember the first place I seen that trick was on geocities, I also found that geocities system would not include it again if it was hard coded to the page so like in the source here (http://www.geocities.com/jsarencibia/home.htm) I changed the image to show this one:


and the funny thing is the credit does go to geocities "/*Site Logo Script (Geocities Watermark)"

if there is a script that does not jump I would like to have it too!!!!!
off to play with geocities and see if the popup ad can be stoped ;D

Quote from: Aquilo on August 22, 2003, 01:12:31 AM

Love this image.

cool! :D
you can use/have it if you wan't.

I made it a few years ago with MicroGraphix Simply 3D 2
http://www.geocities.com/jsarencibia/images/a2.gif

the image shouldn't jump, but it jumps when you scroll, your browser's fault (well just about every browser does that)...

I suggest you tell people to print your image out and stick it on the monitor, it'll be just as annoying there.

Quote from: alienine on August 22, 2003, 04:41:51 AM
the image shouldn't jump, but it jumps when you scroll, your browser's fault (well just about every browser does that)...

I suggest you tell people to print your image out and stick it on the monitor, it'll be just as annoying there.

that's pritty cool! :D :D

Quote from: Aquilo on August 22, 2003, 04:31:04 AM
cool! :D
you can use/have it if you wan't.

I made it a few years ago with MicroGraphix Simply 3D 2
http://www.geocities.com/jsarencibia/images/a2.gif

Thank you!  :)

Quote from: Aquilo on August 22, 2003, 04:31:04 AM
cool! :D
you can use/have it if you wan't.

I made it a few years ago with MicroGraphix Simply 3D 2
http://www.geocities.com/jsarencibia/images/a2.gif

Micrographix Simply 3D? where can i find it?

thx *acf

I honestly don't know, I got it from there chillie cook-off show.

there are some folks selling version 1 but now there is a 3 so!?
I'm having a hard time finding information about the creaters website
http://www.altavista.com/web/results?q=MicroGraphix+Simply+3D+2&kgs=0&kls=1&avkw=aapt

if you have any luck let me know, there was a url on the cd jacket but it's in storage in Las Vegas >:(

Quote from: Aquilo on August 22, 2003, 06:48:33 PM
I honestly don't know, I got it from there chillie cook-off show.

there are some folks selling version 1 but now there is a 3 so!?
I'm having a hard time finding information about the creaters website
http://www.altavista.com/web/results?q=MicroGraphix+Simply+3D+2&kgs=0&kls=1&avkw=aapt

if you have any luck let me know, there was a url on the cd jacket but it's in storage in Las Vegas >:(

sorry can't find it :'( but i do now the file name s3d3web.exe...

Quote from: Cadish on August 21, 2003, 04:30:09 AM
Hi, everybody knows you can set a background picture on a site. But is it also possible to add a foreground picture? By this, i mean a single non-repeat picture on your site and fix its position? So, if you scroll, the picture stays on the same position, and all the text comes behind that picture...

Hope you understood...  ;)

Thx
Cadish

This can be done with CSS fairly easily.  All you need to do is create a class like this:.bottomright {
   position: fixed;
   right: 10px;
   bottom: 10px;
        z-index: 1;
   }
and when you call your image or whatever, put it in between a div e.g.
<div class="bottomright"><img src="image.gif></div>

Explaining that class: the fixed position designates that the image will be stationary with respect to the browser window (as opposed to the page).  The right and bottom designates where you want the fixed image.  It says the right edge is 10 px from the right edge of the browser, etc.  Z-index is how you control the third dimension.  The default is 0, the higher number, the higher priority.  So if you give it a 1, and everything else is 0 by default, your image will always be in front.

Doesn't work for me... ::) Do you have an example page?

hhmmm...  that should have worked.

Maybe try putting in your CSS style

.bottomright {}
IMG.bottomright {
   position: fixed;
   right: 10px;
   bottom: 10px;
   z-index: 1;
}

And see if that works.  I made a quick sample at work earlier, but I was using text instead of an image.

Everything works, except for the word 'fixed'. If I make it 'absolute', my image is in the bottomright. But when i make it 'fixed', my image is in the upperleft... ::)

Fixed is wrong :P.  Might be specific to a certain browser or just a typo.  But, at last check it is not a valid value for position.

Abosolute should be the one you want.

-[Unknown]

Fixed is not wrong.  It is valid CSS2.  What is wrong is the fact that IE 5 & 6 don't support it.

Here's the w3c documentation:
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning

Fine, but then it's wrong.

Sorry about being mistaken... but, if IE doesn't support it, there's no point in using it.

-[Unknown]

Oh...  I agree.  There's no point in using it if 95% of the people in the world aren't going to see it.  I wasn't aware of that when I first wrote it here.

But it's a shame that IE doesn't support it...  it'd be a cool thing to use.  8)