• View
• Edit
• History
• Attach
• Print
• Backlinks

BackgroundImages

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:

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.

Examples:

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

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 ";
               }
    };

   (: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.

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

See Also

• Test.Layers for absolute positioned layers and their pitfalls.
• CSSInWikiPages for creating style sheet wikipages to add css definitions

Contributors

• HansB

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.

 (: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'':)

Comments

See discussion at BackgroundImages-Talk