Menu
I am trying to find the easiest way to give each page (from my NavBar) in my website a 'different' photo-background. It seems that once a background is selected that it remains constant for all subsequent pages.
I have Home, About and Contact me links in my NavBar. My goal is to have one photo-background when visitors click on my Home page, another photo-background when they click on About page, third photo-background when they click on my Contact page, etc.
Is there an easy way to do this?
Here is my code so far:
<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>
My CSS looks like this:
body {background-image:url(greentea.jpg);}
250
You can assign class to body like
for homepage
<body class="home">
for about us page
<body class="about">
The you can use css
body.home{background-image:url(greentea.jpg);}
body.about{background-image:url(greentea.jpg);}
Give each tag a unique page ID. In our app we use ruby on rails, so it is id="<%=controller-view%>" kind of architecture.
If your site is static, just hard code in the ID.
<body id="about">
Then in the CSS
body#about {background...}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
