Recent Changes - Search:




Summary: How to add background images to divisions, tables & cells
Status: Stable
Version: 1
Prerequisites: pmwiki-2.0
Categories: Images


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



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


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


Wrong: if you use a url variable, the full path will be rendered as a link, as stated above, making the style attribute invalid. Actually there is no way to specify domain-independent full paths for style attributes in Pmwiki

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


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

 (:div style='border:4px groove #99f; padding:10px;
A table cell. Background with clouds.jpg for whole table.

(:table width=75% align=center border=2 cellpadding=10 style='background-image: url([=])':) (: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(\$pagename, ParseArgs(PSS('$1')))");

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

   (: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, 
     no-repeat, repeat-x, repeat-y, center etc.

Use attributes as words without commas.

     (:background content='#ccffcc url(' :)

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 ' ... '.

See Also

Cookbook /
CSSInWikiPages  Apply CSS styles via wiki pages (Stable)
LocalCSS  Flexible CSS compilation from a wiki page (beta)
Test.Layers for absolute positioned layers and their pitfalls.


Category: Images


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;
   opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5'':)


See discussion at BackgroundImages-Talk

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.

Edit - History - Print - Recent Changes - Search
Page last modified on November 15, 2014, at 09:49 AM