Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

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)

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

See Also

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

Contributors


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

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.

Edit - History - Print - Recent Changes - Search
Page last modified on September 01, 2012, at 01:27 AM