2013-05-20 20 views
6

Próbuję znaleźć najłatwiejszy sposób nadania każdej stronie (z mojego urządzenia NavBar) w mojej witrynie "innego" tła. Wydaje się, że po wybraniu tła pozostaje ono stałe dla wszystkich kolejnych stron.Różne tła dla każdej strony?

Mam łącza do strony domowej, informacje i kontakt w moim urządzeniu NavBar. Moim celem jest mieć jedno zdjęcie-background gdy użytkownicy klikają na mojej stronie głównej innym fotograficznym tle po kliknięciu O stronie trzeciej zdjęciem tła po kliknięciu na mojej stronie kontaktowej itp

Czy istnieje łatwy sposób to zrobić?

Oto mój kod do tej pory:

<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul> 

Moje CSS wygląda następująco:

body {background-image:url(greentea.jpg);} 
+1

tworzyć wewnętrzne arkusze stylów dla wszystkich stron – underscore

+0

Byłbym ostrożny przy zbyt wielu zdjęciach: może wyglądać ładnie, ale nie robi nic, aby ułatwić korzystanie z witryny. –

+0

Jednym z łatwych sposobów na nazwanie plików w tle jako stronę i używanie pojedynczego skryptu JavaScript, aby zrobić to za ciebie za każdym razem. – hjpotter92

Odpowiedz

5

można przypisać klasę do ciała jak

do głównej

<body class="home"> 

około nas stronie

<body class="about"> 

można użyć CSS

body.home{background-image:url(greentea.jpg);} 
body.about{background-image:url(greentea.jpg);} 
+0

Awesome! Wielkie dzięki! Wierzę, że rozwiązuje to mój problem, wystarczy go przetestować. –

+0

Wybieram ID, ponieważ nie będziesz mieć innego o stronie ani innej stronie głównej. Tam jest tylko jeden. Nazwy klas są lepsze dla

+0

Możesz iść w obie strony, ale czasami możesz wymagać identyfikatora ciała dla niektórych bzdur javascript, więc lepiej pozostań po bezpiecznej stronie. – edd

1

Sposób, w jaki wybrać, aby to zrobić, to przypisać inną klasę na elemencie <body> zależnie na bieżącej stronie.

ten sposób można użyć CSS kierować każdą stronę ze strony poszczególnych aktywów, takich jak tło w zarządzalny mody.

najbardziej CMS można po prostu użyć identyfikator strony (czy to ślimak, identyfikator węzła, a nawet odkażane ścieżka).

+0

Myślę, że to może działać.Jeśli więc przypiszę inną klasę na elemencie na każdej z moich stron (Strona główna, Informacje, Kontakt), to mogę dodać wszystkie te klasy do mojego arkusza stylów i powinno to działać dobrze. Czy mam rację? –

+0

po prostu dodajesz coś takiego jak 'body.page1 {/ * Style tutaj * /}' i lub możesz skierować na potomków, takich jak 'body.page1 .someclass' – hexblot

3

Podaj każdemu z tagów unikalny identyfikator strony. W naszej aplikacji używamy ruby ​​na szynach, więc jest to id = "<% = controller-view%>" rodzaj architektury.

Jeśli Twoja strona jest statyczna, po prostu twardy kod w identyfikatorze.

<body id="about"> 

Następnie w CSS

body#about {background...} 
1

Użyj linii CSS, które już (body {background-image:url(greentea.jpg);}) mają na każdej stronie w to <head><style></style></head> tagi i po prostu zmienić obraz tła na każdej stronie. Pamiętaj, że zaleca się osobny plik CSS, aby uniknąć inline stylizacji.

Powiązane problemy