Unterschiedlicher Hintergrund für jede Seite?

Ich versuche den einfachsten Weg zu finden, jeder Seite (von meiner NavBar) in meiner Website einen "anderen" Foto-Hintergrund zu geben. Es scheint, dass sobald ein Hintergrund ausgewählt ist, dieser für alle nachfolgenden Seiten konstant bleibt.Unterschiedlicher Hintergrund für jede Seite?

Ich habe Home, About und kontaktieren Sie mich Links in meiner NavBar. Mein Ziel ist einen Foto-Hintergrund zu haben, wenn Besucher auf meiner Homepage klicken, einen anderen Foto-Hintergrund, wenn sie über Seite auf klicken, dritten Foto-Hintergrund, wenn sie auf meiner Kontakt-Seite klicken, usw.

Gibt es Eine einfache Möglichkeit, dies zu tun?

Hier ist mein Code so weit:

<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>

Meine CSS wie folgt aussehen:

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

Quelle

2013-05-20 C. Felipe

Inline-Stylesheets für alle Seiten erstellen – underscore

Ich wäre vorsichtig mit zu vielen Fotohintergründen: Es sieht zwar hübsch aus, macht aber keine Website einfacher –

Eine der einfachen Möglichkeiten wäre, die Hintergrunddateien gleich zu benennen als Ihre Seite und mit einem einzigen JavaScript-Skript, um es für Sie jedes Mal zu tun. – hjpotter92

Sie Klasse Körper wie

für Homepage

<body class="home">

für über uns Seite zuweisen

<body class="about">

Das können Sie CSS

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

Quelle

2013-05-20 09:56:33 edd

Awesome! Danke vielmals! Ich glaube, das löst mein Problem, ich muss es nur testen. –

Ich wähle ID, weil Sie keine weitere Seite oder eine andere Homepage haben werden. Es gibt nur eins. Klassennamen sind besser für

Sie können in beide Richtungen gehen, aber manchmal benötigen Sie Körper ID für einige Javascript-Mist, also besser auf der sicheren Seite bleiben. – edd

So wie ich, dass, wählen zu tun, ist eine andere Klasse auf das <body> Elemente zuweisen abhängig auf der aktuellen Seite.

Auf diese Weise können Sie CSS verwenden, um jede Seite mit seitenspezifischen Assets auszurichten, z. B. Hintergrund in einer wartbaren Form.

Bei den meisten CMS können Sie einfach die ID der Seite verwenden (sei es ein Slug, eine Knoten-ID oder sogar ein sanierter Pfad).

Quelle

2013-05-20 09:53:59 hexblot

Ich denke, das könnte funktionieren.Also, wenn ich eine andere Klasse auf dem Element auf jeder meiner Seiten (Home, About, Contact) zuweisen, dann kann ich all diese Klassen zu meinem Stylesheet hinzufügen und es sollte gut funktionieren. Habe ich recht? –

fügen Sie einfach etwas wie 'body.page1 {/ * Styles here * /}' hinzu und/oder Sie könnten auf Abkömmlinge zielen, wie zum Beispiel 'body.page1 .someclass' – hexblot

Geben Sie jedem Tag eine eindeutige Seiten-ID. In unserer App verwenden wir Ruby auf Schienen, also ist es id = "<% = controller-view%>" Art der Architektur.

Wenn Ihre Website statisch ist, nur Code in der ID fest.

<body id="about">

Dann in der CSS

body#about {background...}

Quelle

2013-05-20 09:55:05

Verwenden Sie die CSS-Linie, die Sie bereits auf jeder Seite haben verwenden (body {background-image:url(greentea.jpg);}) darin <head><style></style></head> Tags ist und nur das Hintergrundbild auf jeder Seite ändern. Beachten Sie, dass eine separate CSS-Datei empfohlen wird, um Inline-Styling zu vermeiden.

Quelle

2013-05-20 09:56:44 heinkasner

Unterschiedlicher Hintergrund für jede Seite?

Antwort

Verwandte Themen