Fixing a background image in place with CSS-HTML

[TechBiteReviews]

Hi,
I have a website i am currently making and i am wondering if there is a way to fix the background in the same position all the time even when the windows is re-sized, the issue i am having is that my background is a small striped repeat background at roughly 400px width and height, making the whole background. my navigation buttons on the top also fade out from the stripes to black. The problem is that I can make the buttons line up with the background, but when the window is re-sized the buttons and the background are no longer lined up.

Is there any way to keep it fixed in place with HTML or CSS, preferable CSS?

Thanks to anyone who can help in advanced!

[badwolf]

Have you tried something like this yet? Open your stylesheet and add the bits in red to your background rule;

  background: #FFF url(images/yourimage.png) top center fixed;

[TechBiteReviews]

Originally Posted by badwolf

Have you tried something like this yet? Open your stylesheet and add the bits in red to your background rule;

  background: #FFF url(images/yourimage.png) top center fixed;

Same problem but i thanked you anyways

[Excavator]

Hello TechBiteReviews,
If using badwolfs suggestion doesn't work, maybe you are fixing the background in the wrong place. If it needs to match your navigation buttons then your background probably needs to be part of whatever element your menu is contained by so they will move relative to each other.

Hard to say without seeing the test site.

[TechBiteReviews]

Originally Posted by Excavator

Hello TechBiteReviews,
If using badwolfs suggestion doesn't work, maybe you are fixing the background in the wrong place. If it needs to match your navigation buttons then your background probably needs to be part of whatever element your menu is contained by so they will move relative to each other.

Hard to say without seeing the test site.

Hi Excavator, I currently dont have a server yet as i was planning on buying one once the website is complete. and there is many files to show. basically i have just got the background image set on the body tag of css.

Thanks

[Major Payne]

100% Background Image might work:

http://www.cssplay.co.uk/layouts/background.html

bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html

[TechBiteReviews]

Originally Posted by Major Payne

100% Background Image might work:

http://www.cssplay.co.uk/layouts/background.html

bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html

Hi, unfortunately this would not work either the image has to stay the same size, but as it is a small image i have it on repeat so it fills the page and saves loading time. heres a picture of it not lining up after a mouse rollover:


I hope there is a solution because i really like the design i tried a plain gradient color of blue and it looks no where near as good.

Thanks!