Background Styles

Styling the background

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
bg-primary

bg-info

bg-success

bg-warning

bg-danger
bg-aqua

bg-blue

bg-navy

bg-teal

bg-green

bg-olive

bg-lime
bg-yellow

bg-orange

bg-red

bg-fuchsia

bg-purple

bg-maroon
bg-white

bg-silver

bg-gray

bg-black

Background gradients and patterns#

CSSBackground Gradients

With %%add-css you can define a background gradient, with gradual transition from one color to another. Once defined, you can use it to decorate parts of your content.

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

For a quick start, use the examples from Background Gradients which you can include in your page like this: %%add-css [CSSBackground Gradients] /%


CSSBackground Patterns

Creating sophisticated background patterns is easy, through the wonders of CSS3.

More examples can be found in Background Patterns, which you can include in your page like this:

%%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.

Background Styles/dog.png %%bg







Background Styles/dog.png %%bg.left
Background Styles/dog.png %%bg.right
Background Styles/dog.png





%%bg.top
Background Styles/dog.png %%bg.bottom
Haddock Styles Test page/poppy.jpg
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.


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

Cover#

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

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.
Haddock Styles Test page/poppy.jpg
Of all the fish in the sea, I'm so glad you swam to me


Haddock Styles Test page/poppy.jpg
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.
Haddock Styles Test page/poppy.jpg
Of all the fish in the sea, I'm so glad you swam to me


Haddock Styles Test page/poppy.jpg
Of all the fish in the sea, I'm so glad you swam to me

Image Styles #

Adding Image Styles to the background can change its brightness, colour, saturation, etc. and improve the contrast with the overlay content.
Possible styles: dark, light, grayscale, sepia, saturate-2, saturate-8, hue-rotate-1, hue-rotate-2, hue-rotate3, invert, brightness, contrast-2, contrast-10, blur.
You can also change the direction or position of the background image with fliph, flipv, fliphv.

Dark
Make the background slightly darker to increase readability of the (automatically set to) white text.
%%bg.dark [Haddock Styles Test page/poppy.jpg]/%

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
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

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

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

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


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

Summary#

  • %%bg-<color>
  • %%bg-<gradient>
  • %%bg-<pattern>
  • %%text-white
  • %%text-black
  • .shadow

  • %%bg
  • %%bg.left
  • %%bg.right
  • %%bg.top
  • %%bg.bottom

  • %%bg.cover
  • %%bg.contain
  • %%bg.fixed


See Haddock Template, Haddock Styles, Image Styles, Background Gradients, Background Patterns