Replace background header color with image on selected page?

HTML & CSS
,
1

I have tried many time but I got fail, There is a purple color in background in every pages and I want to use different image on every page which will be relevant to page title.

visit here: http://www.seoservicesland.com/high-quality-link-building-service/

Please help me, I tried a few things, but I could not figure this. Is there a way to replace an image and make it the background of a particular page?

I am looking forward to your response

Thanks

2

For sites with individual header images per page I tend to set the image in <style> tags with in the page’s header, while the rest of the css remains in a common global css file.
So long as the selector is specific enough, it will override the defaults in the global css if you place the <style> after the link to the global css.

  <link rel="stylesheet" href="css/global-styles.css">
  <style>
      .header-filter { background-image: url(backgrounds/this-page-image.jpg);}
  </style>
</head>

I actually use php to pull the filename from a database and put it into the head, though it could be hard-coded into each page if preferred, or use an image file name that echoes the page name to avoid a DB call.

2 Likes
3

Where i have to paste this code, because I have designed this website in wordpress. do i have to create child theme or without creating child theme this is possible.

Thank

4

There is also another way of doing it by setting a class on the <body> for each specific page.
Then in your CSS you can use a descendant selector to set the styles for that page.

<body class="home">
<div id="wrapper">
    <div id="header">
        <h1>Home Page Header is Blue</h1>
    </div>

<body class="about">
<div id="wrapper">
    <div id="header">
        <h1>About Page Header is Green</h1>
    </div>

<body class="contact">
<div id="wrapper">
    <div id="header">
        <h1>Contact Page Header is Purple</h1>
    </div>

.home #header { /*home page background*/
    background:blue;
}
.about #header { /*about page background*/
    background:green;
}
.contact #header { /*contact page background*/
    background:purple;
}

Here is a working demo with four pages linking to one another and changing backgrounds.

page-specific.zip (3.2 KB)

5 Likes
5

I was going to mention using a class as an alternative method. Adding the classes and backgrounds will be fine when there are only a handful of pages, or maybe many pages, but just a handful of different backgrounds.

My method with the <style> tags lends itself more to database driven sites with very many pages, where maintaining all the classes in the css would become unmanageable.
Though limiting it to just a handful of backgrounds, no matter how many pages, will help with caching and therefore page load times.

3 Likes
6

@SamA74. heretofore I would have used a method like @Ray.H presents. But your technique is easier to code - it requires less CSS. I like it !!!

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.