[CSS] Przesuwający się nagłówek (tło image)

[ONdragon]

Witam mam taki kod html

Kod:

<div id="naglowek">
</div>

<div id="tresc">
</div>

Kod:

#naglowek {
    height: 150px;
    background: url(../grafika/naglowek.png) white center repeat-y;
    
}

#tresc {
    width: 1000px;
    height: auto !important;
}

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.

[Pluto]

Może zamiast wczytywać obrazka który jest gradientem po prostu w css3 określisz ten gradient i ustawisz mu width 100% i po problemie.
Jak masz problemy z css3 polecam generator kodu. Znajdziesz tu również gradient.

http://css3generator.com/