• 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([=https://mysite/path/image.file=])'

This can be done in markup for (:div:), (:table:) and (:cell:)
Note that the https:// 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)':)

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

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

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.

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.

Contributors

• HansB

Sandbox

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

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