Witam mam taki kod html

[HTML] pobierz, plaintext 
<div id="naglowek">
</div>
 
<div id="tresc">
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#naglowek {
	height: 150px;
	background: url(../grafika/naglowek.png) white center repeat-y;
 
}
 
#tresc {
	width: 1000px;
	height: auto !important;
}
[HTML] pobierz, plaintext 

Dodam ze nagłówek.png jest gradientem przechodzącym od biełego z lewej strony do ciemnego niebieskiego i z ciemnego niebieskiego do białego
oraz ma powyżej jakieś 1200 px... (gdyż tak to zaprojektował grafik)


No i wszystko wygląda i działa cacy dopóki... No właśnie dopóki nie zmniejszę szerokości okna poniżej 1000 px...
Wtedy tło nagłówka zaczyna się przesuwać (co nie jest pożądane) wraz z zmieszanym oknem przeglądarki. Na dodatek po zmniejszeniu okna np do 500px
i przesunięciu scrollbar w kierunku poziomym w prawo (czyli do "niewidocznego obszaru okna) tło nagłówka jest białe jakby go w ogóle nie było, mimo iż powinna być tam widoczna grafika. Po prostu
nic tam nie ma (od szerokości 500px do 1000px w nagłówku).

Jak pozbyć się tego efektu? Wiem że kiedyś czytałem o tym zjawisku na którymś z forów ale nie potrafię tego odnaleźć. Z tego co pamiętam podawali tam rozwiązanie coś z !important. Próbowałem ale nie wychodzi.

Dziękuje za pomoc.

[HTML] pobierz, plaintext 
#naglowek {
width:1000px;
height: 150px;
background: url(../grafika/naglowek.png) white center repeat-y;
}
[HTML] pobierz, plaintext 

To powinno pomóc.

Niestety nic z tego. Obraz wtedy nie jest wyśrodkowany, nagłówek "leci" do lewego boku. Poza tym gradient zostaje brutalnie ścięty w pewnym momencie i nie ma gładkiego przejścia do końca koloru. Gradient ma ponad 1200 pikseli żeby mógł przejść gładko z jednej barwy w drugą.

[CSS] pobierz, plaintext 
background-position: fixed;
[CSS] pobierz, plaintext