+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Przesuwający się nagłówek (tło image) (/thread-css-przesuwajacy-sie-naglowek-tlo-image)
[CSS] Przesuwający się nagłówek (tło image) - ONdragon - 23-07-2012
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.
RE: [CSS] Przesuwający się nagłówek (tło image) - Pluto - 29-07-2012
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/