Background Image
Hello, I've been reading google posts and drupal discussions for the past 48 hours and haven't found anything that will help me with what I'm sure must be an easy fix, so I'd really appreciate some help on this. I'm trying to change the background image for a specific node (node 3 to be exact). I have already changed the background image for my site by adding
body {
background-image: url("http://www.alecegan.com/sites/default/files/imagepicker/1/background10.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment:fixed;
}
#content {
position:relative;
z-index:1;
}
to the style.css file, but I want a different background image for node 3. Can anyone suggest a way to do this? I've been reading about adding a specific reference and messing with the page.tpl.php file as well, but have had no success in all the posts and modifications I've read. My site is www.alecegan.com, please check out the code, I'd appreciate any advice. Thanks!!
try this
in your page.tpl.php file place the following code directly after the 'print $styles' command
<style type="text/css"><!--
body {
background: url(<?php print mytheme_bgimage($node ); ?>) no-repeat;
}
-->
</style>
and then in your template.php file:
function mytheme_bgimage ($node) {
if($node->nid == 3)
{
return 'image1';
}
else
{
return 'image2';
}
}
There are probably much better ways of doing this, Id be very interested in hearing from others
Switch node 3 to full HTML
Switch node 3 to full HTML and place the style in the content.
<style type="text/css"><!--
body
{
background: url(....) no-repeat;
}
-->
</style>
When you want to change several pages or all the pages in a subdirectory, create a subtheme with the change then use one of the modules that changes theme by page or area. If your theme is example, create example-with-one-image-changed and add the style. One of the style change modules will let you write the rules for adding the subtheme to specific pages.
http://d-theme.com uses a module that lets you type in the theme for a node when you create the node then changes the page to the theme named in the content node.
petermoulding.com/web_architect
Another approach
You can theme your pages individually if you can get drupal to write a body id or body class specific to the page.
To do this you can use the themer module (http://drupal.org/project/themer) to write classes based on the page url (alias).
Before you do this, enable clean urls and turn on the path module.
Now give your pages some real names.
Lets say node 3 gets called "mycoolpage"
Themer will write a body class for mycoolpage" that will be something like "mycoolpage"
This module can be configured to write a variety of body classes.
Now you can write up some css for mycoolpage. It will look something like this:
body.mycoolpage {background-image:url("http://www.alecegan.com/sites/default/files/imagepicker/1/mycoolpage_bg.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment:fixed;
}
This is a pretty flexible approach.