All geek questions in one place

A different background for each page?

I am trying to find the easiest way to give each page (from my NavBar) on my site a “different” photo background. It seems that when the background is selected, it remains constant for all subsequent pages.

I have Home, About Us, 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, a third photo background when they click on my contacts page, etc.

Is there an easy way to do this?

Here is my code:

<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);}
+6
source share
4 answers

You can assign a class to the body, for example

for the main page

 <body class="home">

for us page

 <body class="about">

You can use css

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

Give each tag a unique page identifier. In our application, we use ruby ​​on rails, so this is id = "<% = controller-view%>" type of architecture.

If your site is static, just enter the code in the identifier.

 <body id="about">

Then in CSS

 body#about {background...}
+3
source

How can I do this, I need to assign a different class in the <body> element depending on the current page.

Thus, you can use CSS to target each page with page-specific properties, such as a background in a supported mode.

In most CMS, you can simply use the page identifier (be it slug, id node, or even a sanitized path).

+1
source

Use the existing CSS line ( body {background-image:url(greentea.jpg);} ) on each page in the <head><style></style></head> tags and simply change the background image on each page. Keep in mind that it is recommended to have a separate CSS file to avoid inline style.

+1
source

Source: https://habr.com/ru/post/945404/

More articles:


All Articles