background-image on a node
MisterBox - October 26, 2007 - 19:12
I've tried everything and I'm getting desperate !
Does anybody out there knows how to add different backgrounds to different nodes ???
I've tried already this a DIV : http://drupal.org/node/182672
And this directly in the css :
#node-18 {
background-image: url(images/banner_02);
}
And with a table bu the text alligns in the middle
Getting very tired,please just a simple clear question , i've searched allover the drupal-site couldn't find anything !!!!
Just want 7 nodes with 7 different background , that can't be that hard ????
Any chance you have a link to what your site?
A link would make it much easier for people to help you,
Lacking a link, some questions
Is the css for the background working or not?
The text alignment is a seperate issue, it would imply you have a
text-align: center;that is being applied to the text (or possiblymargin: auto) For this problem the firebug extension for firefox would help. With it you can inspect the centered text, see what alignment is applies and where in the css it comes from.link
http://www.comeandgo.be/multisite/node/18
here you can see a page wher i've put a table with a background and some text !
The allignement inside a table starts in the center , when you ad to much text the background images duplicates , evevn though i've put no-repeat !
I would prefer a solution where the bacjkground is just standng alone in the body off the node
THAnks
This one is close
Instead of using
background-image: url(...);try
background: url(...) no-repeat;Notice the second one uses 'background', not 'background-image'
Think I know what you need to do
go to your themes directory and open the map you have chozen for your site theme then open the style.css document and
add some simple code or change the link and bobs you uncle.
the url should be the (imageName.jpg) should read the same as the image file you place in the same map.
body {
background-color: #000000;
color: #FFFFFF;
background-image: url(imageName.jpg);
background-position: center;
background-attachment: fixed;
Don't I
When I do that I change the background for all the nodes .
I actually have seven different nodes witch need seven different backgrounds .
I don't want the same image on every node !
I've tried anyway
added the picture and this code in the css
body {
background-color: #000000;
color: #FFFFFF;
background-image: url('kader1.jpg');
background-position: center;
background-attachment: fixed;
}
and it didn't work ???
http://www.comeandgo.be/multisite/node/21
Text but no background ? Is there another way ??? (Still desperate !)
The body tag will cover too much ground
If they only want the background image behind the node applying the background image to the body tag will cover more area than they are asking for.
That's what I thought also !
Is there nobody out there that has a simple 'add a background to a node' -solution !
I really wan't to finish this stuff and i'm already trying for several days to find a sollution!!!!
Do I really sound that desperate...
I would use a css approach
I would use a css approach which you seem not too like. Your example http://www.comeandgo.be/multisite/node/18 seems close, though I do not see the no-repeat (see by comment above for more).
That's not a css approach !
I've tried to put it in the html-code but it just dissapears afterI've enabled the rich text
That's why you can't see it . It's just a table with a background image I,ve made with the Tiny-imce editor .
I surrely would preffer a CSS solution. It would be much eassier afterwards .
Just a fixed node-style with their bacjkgroiund image and the text appearing on the right place !
For instance different classes or different CSS ??? I just don't find the right way !
I've already tried several CSS approaches for instance by creating a seperate class wich somebody proposed in http://drupal.org/node/182672, tried also the system proposed in http://drupal.org/node/185947.
I just relized part of the problem
You node.tpl.php does not output node-{nid} (ex: node-123) as the id or classs of the node so using css that depends on this will not work unless you change your node.tpl.php file.
I'm not a php hero !!!
This is what i have in the node.tpl.php file, if you could just tell me what too change it would be GREAT !!!
<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
<?php if ($page == 0) { ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php } else { ?>
<?php print $picture ?>
<em class="info"><?php print $submitted ?></em>
<?php }; ?>
<div class="content clearfix">
<?php print $content ?>
</div>
<?php if ($links) { ?>
<div class="info clearfix">
<?php if ($terms) { print t("Posted in") . ' ' . $terms; }; ?>
<?php if ($submitted) { ?>
<?php print $submitted ?>
<br />
<?php }; ?>
<?php print $links ?></div>
<?php }; ?>
</div>
[ Edited to add <code> and </code> code tags: nevets ]
Change the first line to set id
So change
<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">to
<div id="node-<?php print $node->nid; ?>" class="node<?php print ($sticky) ? " sticky" : ""; ?>">Then you will be able to set the background like this in style.css (the example uses 123 as the node id, your actual number depends on the node)
#node-123 {background: url(pathtoyourimage) no-repeat;
}
Tried it ???
And it did not work , I deffinitely think the template i'm using is'nt very flexible ????
I'm sure this system works for other templates ! Thanks for helping !!!
Great it works , finally
After two weeks of research tis system worked but , it workes not with all templates so ...
forget sweethome . I'm using Lite Jazz a Roople theme and there trhere wher no problems .
Just had to follow the instrucions above and add a piece of code to the CSS for every node with a different background !
I'm very very happy endI hope this research will be usefull to others !
Separate theme for a specific node
http://drupal.org/node/136647
maybe this will help- I dont quite understand it myself
I'm going to trie it anyway !
I'm so desperate for this backgroundstuff that I would try everything .
This systems requires that you make for every node with a different background a seperate php page. I can't do that but I iunderstand the general idea of it ...
I will asked a php-friend if he can help me out .
Thanks for the tip !
if you would do anything,
if you would do anything, hmmm .... you could try it with a black cat thrown over your right shoulder in a full moon night... ;-)
but wait ... in my source code (my sandbox uses garland as a theme) there is something like this:
<div id="node-44" class="node">its actually explained in one o the comments above, but try it again its the easiest way to go.
so it tags every node with the node ID and gives you the oportunity to style every node individually (here Node 44):
div#node-44 {background-image:url(path/to/image.jpg);
background-repeat:no-repeat;
background-position: choose from center, top, left, right, bottom (or horizontal px / vertical px);
}
try to use firebug (a firefox plugin and rightclick on the elements you want to style (inspect element).
maybe the approach did not work because your div is not expanded so try to address another element in your code like:
div#node-44 table {background-image:url(path/to/image.jpg);
background-repeat:no-repeat;
background-position: choose from center, top, left, right, bottom (or horizontal px / vertical px);
}
sometimes other styles override what you want to do so try using !important
div#node-44 table {background-image:url(path/to/image.jpg) !imortant;
background-repeat:no-repeat !imortant;
background-position: choose from center, top, left, right, bottom (or horizontal px / vertical px) !imortant;
}
if that doesnt work the black cat always does...
Black cat ...
thanks it did worked it was just not the right theme !
I already threw the cat and he came back with a black rabbit in his mouth (a true story !)
Anyway yoy can look at the result here : http://www.comeandgo.be/multisite/
It's not completely ready but almost...
Thanks for helping everybody out there !!!
DON'T throw your animals.
OLIVIER
Looks nice
My one comment would be to improve the constrast of the text over the image (as it is it is a bit of a reading test)