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([=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:

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

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

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

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:

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([=https://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 ' ... '.

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.

Contributors


Category: Images

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.

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

Comments

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.