Question

I’m using Drupal 7. My bg image in page.tpl.php file and image get to css.

My html:

<div class="mainimage" id="mainimg" class="clearfix"></div>

And CSS:

#mainimg {
    background: url("../img/mainimg.jpg") repeat scroll 0 0 transparent;
    height: 500px;
    left: 50%;
    margin-left: -640px;
    position: absolute;
    width: 1280px;
    z-index: 1;
    top:0;
}

My bg image seen all pages. It’s normally. But i want, change my bg image on every page.
E.G.

...
mysite.com/index.php -bg image: mainimg.jpg
mysite.com/news -bg image:news.jpg
mysite.com/about -bg image: about.jpg
...

How can i solve this?

Answer 1

You can use the built-in Drupal functions to add a unique identifier to the body, so you can target each page individually in your CSS.

For example, if the body had id="news", you could change the background image by adding this to your CSS:

#news #mainimg {
    background-image: url("../img/news.jpg");
}