Fixed background image (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

Anthony162 -> Fixed background image (6/21/2004 11:11:54)

Hi,

I have black text on a white background, and behind the text, a piece of faded clipart. Is there any way of getting the clipart to remain 'fixed', so that when a visitor scrolls the text, the image always remains in view?

Please don't suggest using CSS though- I haven't learnt to use it yet! [&:]

Thanks in advance, [:)]

Anthony.



Spooky -> RE: Fixed background image (6/21/2004 16:46:50)

Errr..... CSS [&:]

It is quite easy to do though!
http://www.frontpagewebmaster.com/m-204127/mpage-1/key-Fixed%252Cbackground%252Cimage//tm.htm#204127



Giomanach -> RE: Fixed background image (6/21/2004 16:54:41)

Spooky is right, CSS is the simple option, unless you want to spend hours with JavaScript that is?

Dan



Anthony162 -> RE: Fixed background image (6/22/2004 5:34:26)

Thank you very much both of you. Ive got it working, and the image is fixed as I wanted it to be. The only thing now though is that when the page loads, the image, which is quite large, starts at the top of the screen and is obscured by the banner. How do I get it so that it starts in the center of the screen?

Thank you.



Giomanach -> RE: Fixed background image (6/22/2004 7:22:52)

Add this to your CSS: 

background-position: center center;


Dan



Anthony162 -> RE: Fixed background image (6/22/2004 7:56:28)

Hi,

Thanks for replying again. I've tried adding the line, but when I go into preview mode, the image remains in the same place (hugging the top of the screen in the center), and when I return to code view, the background-position: center center; line has reverted back to background-position: center; !

Have I missed something? [&:]

Thanks.



Giomanach -> RE: Fixed background image (6/22/2004 7:57:06)

Post your CSS, and I'll take a look

Dan



Anthony162 -> RE: Fixed background image (6/22/2004 8:00:12)

Ok. This is the code as it is now:

<style type="text/css">
body
{
background-image: url('reading%20paper.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>


Thanks [:)]



Giomanach -> RE: Fixed background image (6/22/2004 8:01:35)

<style type="text/css">
body
{
background: #FFFFFF url(reading paper.gif) fixed no-repeat center center;
}
</style>


Alter the color to something similar to the image

Dan



Anthony162 -> RE: Fixed background image (6/22/2004 10:06:17)

Hi again,

Ive copied and pasted into Notepad, then into Frontpage html view, the code you just provided. But it still makes no difference to the image (which remains in the centre, but aligned to the top of the screen on entering the page). I must of missed something.

Thanks for your help and patience though.



d a v e -> RE: Fixed background image (6/22/2004 10:14:01)

works for me http://members.surfeu.fi/dave_pirjo/test-area/css_stuff/backgrounds.htm (either 'center' or 'center center' do the same thing

can you post a url?



bobby -> RE: Fixed background image (6/22/2004 10:20:09)

What browser are you using?



Giomanach -> RE: Fixed background image (6/22/2004 10:37:12)

Sounds like FP Preview[8|]



Gene -> RE: Fixed background image (6/22/2004 11:06:42)

You could always use absolute positioning in your css file and position it exactly where you want it. x=?, y=?.



d a v e -> RE: Fixed background image (6/22/2004 11:23:22)

but that won't position it in the center unless you know the exact size of the user's viewport.



Anthony162 -> RE: Fixed background image (6/23/2004 4:59:45)

Hi,

I'm sorry there is no url for now, as the page is in development. I have tried 'center' and 'center center', but when I go back into preview mode, the image position remains the same, and when I return to html view, it reverts by itself back to just 'center'! I'm using Explorer 6. [&:]



d a v e -> RE: Fixed background image (6/23/2004 5:01:52)

what do you see in your *browser*?

is it centred in that (vertically as well as horizontally)?



Anthony162 -> RE: Fixed background image (6/23/2004 6:36:12)

In HTML view I have this code:

<style type="text/css">
body
{
background-image: url('reading%20paper.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>

When I go straight from that into browser/explorer preview, the image is centered and fixed, but it aligns/hugs the top of the screen. When i flip back to HTML view, I find that center center has reverted back to center, by itself! [&:]



d a v e -> RE: Fixed background image (6/23/2004 6:40:42)

well it should work... i'm not sure how much more we can help you unless you can post a url to this example page so we can see it... (you can copy it can call it test.htm or something).



Donkey -> RE: Fixed background image (6/23/2004 6:41:18)

Try changing as follows; 
<style type="text/css">
body
{ 
background: #FFF url(reading paper.gif) fixed no-repeat 50% 50%; 
}
</style>


Then you can fine tune the position by altering the %ages. Images often look a bit odd when vertically centered exactly on the screen (depending on the size and shape) and it sometimes looks better IMHO to fix them slightly higher than center. To alter fixed height change the last value (lower means higher IYSWIM).



Giomanach -> RE: Fixed background image (6/23/2004 7:27:31)

quote:

but when I go back into preview mode

Guys

You are all missing the point. He is looking at the web through FP Preview, not a browser, which is why his background doesn't move.

Anthony - Save the page and look at it through Internet Explorer/Mozilla/Opera/Netscape. NOT FP Preview

Dan



Donkey -> RE: Fixed background image (6/23/2004 8:10:17)

?

Dan:
quote:

Guys

You are all missing the point. He is looking at the web through FP Preview, not a browser



Anthony 162:
quote:

I'm using Explorer 6.

quote:

When I go straight from that into browser/explorer preview,



Giomanach -> RE: Fixed background image (6/23/2004 8:13:12)

Ooops, I missed that bit. Sorry.

The only other option is to edit it in Notepad to the coding we have given, and I can't remember where the settings are in FP, but you need to set it to preserve Original HTML coding.

Dan



Giomanach -> RE: Fixed background image (6/23/2004 8:19:11)

Found it:

quote:

Tools > Page Options > HTML Source > Check preserve existing html



Giomanach -> RE: Fixed background image (6/23/2004 8:54:07)

Looks perfectly fine here:

http://aa.1asphost.com/giomanach/client/untitled.jpg

Dan



d a v e -> RE: Fixed background image (6/23/2004 8:59:05)

centred for me but it's very pixellated and it's 27k - too big! have you got the original and if so what format(s)?



Anthony162 -> RE: Fixed background image (6/23/2004 9:15:46)

Yes it is centred, but when you enter the page part of the image is obscured behind the banner! Is there no way to sort that?

It's a gif image. Yes its pixellated, but I dont mind that. I might resize it/soften it in Paint Sho while I look for a better image anyhow. Its just a tester really.



Donkey -> RE: Fixed background image (6/23/2004 19:54:26)

If you use percentages instead of center you can adjust the height of the fixed image by adjusting the second percentage. Try this small change to your existing code and adjust the percent value until it looks OK. 

<style type="text/css"> 
body 
{ 
background-image: url('reading%20paper.gif'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position:  50% 55%; 
} 
</style>

<edit> hit wrong button - posted too soon</edit>



Donkey -> RE: Fixed background image (6/23/2004 20:52:56)

I've just downloaded your page and images and had a little play with it. I suggest the following:
1)The embedded style sheet should be moved into the <head> section, it is currently in the <body>.
2)Make the second value 100%.
3)Reduce the image size to 75% - i.e. 337 px width.
4)Loose the space in the image description i.e. reading-paper.gif
5)Loose the quotes in the image address i.e. url(reading-paper.gif);

This looks OK at 1024 x 768 screen res, but at 800 x 600 the head on the image is behind the banner again. The starting position is marginally better in IE than in Firefox and Opera.



Anthony162 -> RE: Fixed background image (6/24/2004 7:07:34)

Thank you that seems to work.

And thanks to everyone for their advice and patience on this! [:D][:)][;)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375