PmWiki | Cookbook / BackgroundImages

Summary: How to add background images to divisions, tables & cells

Status: Stable

Version: 1

Prerequisites: pmwiki-2.0

Maintainer:

Categories: Images

Votes:

Question

How can I use background images for divisions, tables and table cells?

Answer

style='background-image...'

The url location for use as a background image can be included in a style declaration as

    style='background-image:url([=http://mysite/path/image.file=])'

This can be done in markup for (:div:), (:table:) and (:cell:)
Note that the http:// reference must be enclosed in [= =]. Otherwise PmWiki will render it as a link.
However, [= =] isn't necessary if you're using a relative or absolute filepath on your server, for instance ->url(../pub/images/image.file) or url(../../../pub/images/image.file) You may need to experiment a little to get the directory levels right. Count levels from the wiki.d directory.
You could use a page variable for the $PubDirUrl. First define it in config.php with:

$FmtPV['$PubDirUrl'] = '$GLOBALS["PubDirUrl"]';

Then use it in the url for the background image for instance like

url({$PubDirUrl}/images/image.file)

Note also that you cannot use Attach:image.ext Δ syntax inside the url.

Examples:

A division with a background image. A relative path is used.

 (:div style='border:4px groove #99f; padding:10px;
 background-image:url(../../pmwiki/uploads/Test/clouds.jpg)':)

A table cell. Background with clouds.jpg for whole table.

(:table width=75% align=center border=2 cellpadding=10 style='background-image: url([=http://www.pmwiki.org/pmwiki/uploads/Test/clouds.jpg=])':) (:cell valign=top:)

Second cell. Blue background img for this cell.

Markup (:background:)

To apply background-image styling to divisions not defined on the wiki page, like the whole wikitext division, you can use a custom markup:

Set in config.php:

 
     Markup('background', 'directives',
           '/\\(:background(\\s.*?)?:\\)/e',
           "Background(\$pagename, ParseArgs(PSS('$1')))");

    function Background ($pagename, $opt) { 
         global $HTMLStylesFmt;
         foreach($opt as $divname => $value) {
              $HTMLStylesFmt[] = " #$divname { background:$value } \n ";
               }
    };

Usage:

   (:background divname1='any css background attributes' divname2= :)

divname is any division name, like wikitext, or as used in Gemini and Fixflow skins: content, sidebar etc (check your skin tmpl for divs, there are big variations in naming divs) without the leading # sign.

Background attributes are any css attr. for background (including background image url), like

     color-names, color-codes, 
     url(http://site/path/bgimage),
     no-repeat, repeat-x, repeat-y, center etc.

Use attributes as words without commas.

Example:

     (:background content='#ccffcc url(http://mysite.com/pmwiki/uploads/Main/mybgimg.jpg)' :)

You can have several divnames in the markup, like content=#fed sidebar=#def etc.
If there are several values (like in the example) they need to be included in ' ... '.

Notes, Comments, Questions

The background markup has some potential for misuse, as it can render the page unusable, if backgrounds are chosen which makes the page unreadable. Similar caution applies to use of absolutely positioned divisions.

How can I set that background image for a single wiki page (ie for the <html> tag)?

Hmmm, do you mean to the whole page? It depends if the skin template has a wrapper division. If so you could use that (in FixFlowSkin and GeminiSkin you can use 'wrapper'). In css you normally use the body tag, but this won't work with the above markup, since the markup puts a # symbol in front of the div name. you could try and change the markup, write $HTMLStylesFmt[] = " $divname { background:$value } \n "; , i.e. without the #. and then use div names with the # if you need them, like #content, and try body for a whole page background. Note this is untested. ~HansB

This is how I got the background to work for the whole page:
I set a body id <body id="WholePage"> - you mean in the skin's .tmpl file? Yes.
I inserted the markup in config.php exactly as shown. - which markup, as shown where? The code that is placed in the config shown at the top of this page.
This is the code to put an image as a background:
(:background WholePage='url(/images/background.jpg)':) so for instance (:background WholePage='http://www.pmwiki.org/wiki/(images/clouds.jpg)':)? No, like (:background WholePage='url(http://www.pmwiki.org/wiki/(images/clouds.jpg)':). It also works with a hex value for a color.
It worked great! It did. Thanks.
Hope this helps with the above question. ~Jennifer Humphrey

could use a little more help!

This recipe was last tested on PmWiki version: 2 beta51
This recipe requires at least PmWiki version: 2 beta43

Contributors

HansB

Category: Images

Sandbox

Background image opacity is also applied to the text, making it less usefull:

It's a BACKGROUND image... at the back of the page content. Why would you apply opacity to it? Just prepare the base image with the require amount of fading.

A division with a background image.

 (:div style='border:4px groove #99f; padding:10px;
 background-image:url([=http://www.pmwiki.org/pmwiki/uploads/Test/clouds.jpg=]); 
   opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5'':)

BackgroundImages