IT.COM

Static centered backgound in multi. resolutions

Spaceship Spaceship
Watch
Hey gang,

I am trying to create a page that has a watermark-like background image. I want the image to stay centered (right to left and top to bottom) on the page and not move when the page is scrolled.

I can get the image to stay still with some CSS tricks such as:
Body { background: url('../images/imagename.jpg') fixed;}

but I can't get the image to center on the background. The image is small and the background color is set to white to match the rest of the image's background.

The additional trouble is I am trying to program this so it works with multiple screen resolutions. I use 1024x768 but I know a lot of probably users use 800x600 and I want it to look right for both resolutions.

Any thoughts would be appreciated. I can try to put together a sample page and post it if you want an example of what I am talking about...but it may take me some time.

Thanks!!!!

Mikey
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Maybe something like this will work?
Code:
BODY {background-image: url(image.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;}
I think the fixed property only works in IE though?
 
0
•••
no. actually it doesnt work correctly in IE. It'll work in this case, but if he then tries to do another background within a div, also fixed, it won't work quite right. hard to explain. it'll work in the most recent version of netscape, as far as earlier ones. no clue. it'll also work just fine in opera, if anyone actually uses opera.
 
0
•••
Here's an example of what I was trying to say:

go here: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

scroll a bit..

notice the shell moves. according to the css reccomendation it's not supposed to because it's fixed. In the most recent versions of netscape and opera, it won't scroll, it'll stay right where it is as you scroll.

Netscape actually did it right for once. Scary concept.
 
0
•••
actually...I figured it out. I used a combination of positioning language and the "fixed" language. The only problem is that it doesn't show up right in Netscape...but honestly, that's the least of my worries. I will fix that when I get the time.

Thanks for the help!!!
Mikey
 
0
•••
0
•••
CSS, it's just a mystery! :D
 
0
•••
It's not that CSS is such a mystery, it's the damned browser companies that are mysterious. Such as microsoft, who says they're up to the specification of CSS, and still get it wrong here and there.

If these browser companies just made their browsers do what they're supposed to do, our jobs would be much easier.

Imagine not having to check your design in other browsers...
 
0
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back