各ページの背景が異なりますか？

私のウェブサイトの各ページ（私のNavBarから）に「異なる」写真の背景を与える最も簡単な方法を見つけることを試みています。バックグラウンドが選択されると、その後のすべてのページで一定のままであるように見えます。各ページの背景が異なりますか？

私のNavBarに私のHome、About、Contact meのリンクがあります。私の目標は、彼らが私の連絡先のページをクリックしたとき、彼らはページ、第3フォト・背景についてをクリックすると、訪問者が自分のホーム・ページ、別の写真・背景をクリックすると1フォト背景を持つことである、など

がありますこれを行う簡単な方法は？

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

私のCSSは次のようになります：私はそれを行うことを選択し

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

出典

2013-05-20 C. Felipe

すべてのページのインラインスタイルシートを作成する – underscore

あまりにも多くの写真の背景については慎重ではありません。見た目はよく見えますが、サイトを使いやすくするために何もしません。 –

簡単な方法の1つは、あなたのページとして、毎回あなたのためにそれを行うために単一のJavaScriptスクリプトを使用します。 – hjpotter92

CSSで次に

<body id="about">

<body class="about">

ザ・あなたは、CSSを使用することができます

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

出典

2013-05-20 09:56:33 edd

恐ろしいです！どうもありがとう！私はこれが私の問題を解決すると信じています。私はそれをテストする必要があります。 –

私はIDを選択します。なぜならあなたはページや別のホームページについて別のIDを持っていないからです。 1つしかありません。クラス名は、複数のページがスタイルを取得する

いずれにしてもかまいませんが、時には安全な側に滞在するために、いくつかのjavascriptのクラップにボディIDが必要な場合があります。 – edd

道、によって<body>要素の上に別のクラスを割り当てることです。ここ

は、これまでの私のコードです現在のページで

このようにして、CSSを使用して、バックグラウンドなどのページ固有のアセットを持つ各ページをメンテナンス可能な方法でターゲティングすることができます。

ほとんどのCMSでは、ページのID（スラッグ、ノードID、またはサニタイズされたパスなど）を使用できますか。

出典

2013-05-20 09:53:59 hexblot

これはうまくいくと思います。したがって、私の各ページ（Home、About、Contact）の要素に別のクラスを割り当てると、それらのクラスをすべて自分のスタイルシートに追加することができます。私は正しい？ –

'body.page1 {/ * Styles here * /}'や 'body.page1 .someclass'のような子孫をターゲットとして追加するだけです。 – hexblot

各タグに一意のページIDを付けます。私たちのアプリでは、Rubyをレールに使用しているので、id = "<％= controller-view％>"のようなアーキテクチャです。

サイトが静的である場合は、IDにハードコードが含まれています。あなたが私達についてのページのホームページ

<body class="home">

ため

のようなボディにクラスを割り当てることができます

body#about {background...}

出典

2013-05-20 09:55:05

あなたはそれで各ページに、すでに（body {background-image:url(greentea.jpg);}）はCSSラインが<head><style></style></head>タグだとちょうどすべてのページに背景画像を変更してください。インラインスタイリングを避けるために、別個のCSSファイルを用意することをお勧めします。

出典

2013-05-20 09:56:44 heinkasner

各ページの背景が異なりますか？

答えて

関連する問題