Background Colors#

Many solid background colors are available in the Haddock Template. They all start with the prefix bg- :

 %%bg-info /%  using the predefined context colors
 %%bg-red /%  for the standard html colors

Background gradients and patterns#

%%add-css
  .bg-mygradient { 
        background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
  }
/%
%%bg-mygradient
  <page content>
/%

%%add-css [CSSBackground Patterns] /%  
%%bg-pattern-1
  <page content>
/%

Background Images #

Normally images are just part of the page content. However, with %%bg you can also put them as part of the page background. Doing so will allow the page content (text, tables, other images) to be overlayed over the background. (more about how to improve the eligibility of text below)
Note that in a browser, background images cannot be copy/pasted by the user.

Markup:

%%bg [<image>] /%  
%%bg [{Image src='image-url' }] /% 
[{Image src='image-url' class='bg' }] 

CALIFORNIA
Yosemite park


Image:https://source.unsplash.com

Size & Position#

Background images are positioned by default in the center of the container, but other positons are possible too.

%%bg

---

%%bg.left

---

%%bg.right

---

%%bg.top

---

%%bg.bottom

Poppy (centered)

As a general rule, the size of the original image is kept. If the image is too big to fit, if will be clipped. You can rescale the image with %%bg.cover or %%bg.contain.

Contain#

Use %%bg.contain to scale the image as large as possible and maintain its aspect ratio (image doesn't get squished). The image is letterboxed within the container.

When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

---

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

Cover#

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

---

Use %%bg.cover to scale the image as large as possible and maintains its aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Fixed #

By default the background image scrolls with the content of the page.

When using %%bg.fixed the background remains fixed with regard to the viewport.

Therefore, scrolling will affect only the content of the page; the background remains fixed. During scrolling different parts of the background will be revealed.

---

a p a c h e jspwiki

Eligibility of text#

Depending on the color range or brightness of the background image, the readability of the overlay content of the page may be affected. Here are some ways to improve the eligibility of the page content.

Text Styles#

Change the color of the text: text-white, text-black.

---

Of all the fish in the sea, I'm so glad you swam to me

---

Of all the fish in the sea, I'm so glad you swam to me

Add shadow to the text: text-white.shadow and text-black.shadow.

---

Of all the fish in the sea, I'm so glad you swam to me

---

Of all the fish in the sea, I'm so glad you swam to me

Image Styles #

Dark

Make the background slightly darker to increase readability of the (automatically set to) white text.

%%bg.dark [Haddock Styles Test page/poppy.jpg]/%

---

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

---

Light

Make the background slightly lighter to increase readability of black text.

%%bg.light [Haddock Styles Test page/poppy.jpg]/%

Background lighter, text color black

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

Animated background#

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. The name derives from extensive use of the technique by American documentarian Ken Burns.”
– wikipedia.org

---

In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
by John McCrae, May 1915

Summary#