[{SET page-styles='prettify-nonum table-condensed-fit'}]
%%lead.bg-pattern-2.center.rounded
\\
%%h1 Styling the background /%
\\
\\
/%
[{TableOfContents }]
!!!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
}}}
%%columns.center
%%bg-primary
{{{bg-primary}}}
/%
----
%%bg-info
{{{bg-info}}}
/%
----
%%bg-success
{{{bg-success}}}
/%
----
%%bg-warning
{{{bg-warning}}}
/%
----
%%bg-danger
{{{bg-danger}}}
/%
/%
%%columns.center
%%bg-aqua
{{{bg-aqua}}}
/%
----
%%bg-blue
{{{bg-blue}}}
/%
----
%%bg-navy
{{{bg-navy}}}
/%
----
%%bg-teal
{{{bg-teal}}}
/%
----
%%bg-green
{{{bg-green}}}
/%
----
%%bg-olive
{{{bg-olive}}}
/%
----
%%bg-lime
{{{bg-lime}}}
/%
/%
%%columns.center
%%bg-yellow
{{{bg-yellow}}}
/%
----
%%bg-orange
{{{bg-orange}}}
/%
----
%%bg-red
{{{bg-red}}}
/%
----
%%bg-fuchsia
{{{bg-fuchsia}}}
/%
----
%%bg-purple
{{{bg-purple}}}
/%
----
%%bg-maroon
{{{bg-maroon}}}
/%
/%
%%columns.center
%%bg-white
{{{bg-white}}}
/%
----
%%bg-silver
{{{bg-silver}}}
/%
----
%%bg-gray
{{{bg-gray}}}
/%
----
%%bg-black
{{{bg-black}}}
/%
/%
!!!Background gradients and patterns
%%columns.raised
%%add-css [CSSBackground Gradients] /%
%%bg-gradient-1
With {{{%%add-css}}} you can define a [background gradient|https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients|class='slimbox'], 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] /% }}}
/%
----
%%add-css [CSSBackground Patterns] /%
%%bg-pattern-1
Creating sophisticated background patterns is ''easy'', through the wonders of [CSS3|https://developer.mozilla.org/en/docs/Web/CSS/CSS3|class='slimbox-link'].
More examples can be found in [Background Patterns|Background Patterns|class='slimbox'], 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|Background Styles#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' }]
}}}
%%default.center.text-white
%%bg [{Image src='https://source.unsplash.com/-g4dgdOExsw/' }] /%
\\
\\
\\
%%h1 CALIFORNIA /%\\
Yosemite park
\\
\\
\\
%%small %%small 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.
%%columns.border.center.bg-success
%%bg.blend [Background Styles/dog.png]/%
{{{%%bg}}}
\\
\\
\\
\\
\\
\\
\\
----
%%bg.blend.left [Background Styles/dog.png]/%
{{{%%bg.left}}}
----
%%bg.blend.right [Background Styles/dog.png]/%
{{{%%bg.right}}}
----
%%bg.blend.top [Background Styles/dog.png]/%
\\
\\
\\
\\
\\
\\
{{{%%bg.top}}}
----
%%bg.blend.bottom [Background Styles/dog.png]/%
{{{%%bg.bottom}}}
/%
%%default
%%bg [Haddock Styles Test page/poppy.jpg]/%
%%lead.text-white.center
__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|Background Styles#Cover] or [%%bg.contain|Background Styles#Contain].
!!Contain
%%columns.sm.border
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.
----
%%bg.contain.bg-danger [Haddock Styles Test page/poppy.jpg]/%
%%lead.small.center.text-white
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.\\
%%text-smallcaps by John McCrae, May 1915/%
/%
/%
!!Cover
%%columns.ms.border
%%bg.cover.top.left [Haddock Styles Test page/poppy.jpg]/%
%%lead
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.\\
%%text-smallcaps 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
%%columns.sm.border
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.
----
[{Image src='https://source.unsplash.com/-g4dgdOExsw/' class='bg cover fixed' }]
%%text-white.center
%%lead a p a c h e [{Image src='CopyrightNotice/feather-small-w.png' height='80px' align='center' }] {{{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
%%columns
Change the color of the text: {{{text-white}}}, {{{text-black}}}.
----
%%bg.cover [Haddock Styles Test page/poppy.jpg]/%
\\
%%center
Of all the fish in the sea, I'm so glad you swam to me
/%\\
----
%%bg.cover [Haddock Styles Test page/poppy.jpg]/%
\\
%%text-white.center
Of all the fish in the sea, I'm so glad you swam to me
/%
\\
/%
%%columns
Add shadow to the text: {{{text-white.shadow}}} and {{{text-black.shadow}}}.
----
%%bg.cover [Haddock Styles Test page/poppy.jpg]/%
\\
%%text-black.shadow.center
Of all the fish in the sea, I'm so glad you swam to me
/%
\\
----
%%bg.cover [Haddock Styles Test page/poppy.jpg]/%
\\
%%text-white.shadow.center
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}}}.
%%columns
%%h4
Dark
/%
Make the background slightly darker to
increase readability of the (automatically set to) white text.
{{{
%%bg.dark [Haddock Styles Test page/poppy.jpg]/%
}}}
----
%%bg.dark.cover [Haddock Styles Test page/poppy.jpg]/%
%%lead.center
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.\\
%%text-smallcaps by John McCrae, May 1915/%
/%
/%
%%columns
%%bg.light.cover [Haddock Styles Test page/poppy.jpg]/%
%%lead.center
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.\\
%%text-smallcaps by John McCrae, May 1915/%
/%
----
%%h4
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
/%
%%columns
%%bg.hue-rotate-3.cover.fliph [Haddock Styles Test page/poppy.jpg]/%
%%lead.text-white.center
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.\\
%%text-smallcaps by John McCrae, May 1915/%
/%
/%
!! Animated background
%%columns.sm.border
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|https://en.wikipedia.org/wiki/Ken_Burns|class='slimbox-link']
----
%%bg.kenburns [Haddock Styles Test page/poppy.jpg]/%
%%lead.center.text-white
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.\\
%%text-smallcaps by John McCrae, May 1915/%
/%
/%
!!!Summary
%%columns.border
* {{{%%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}}}
----
* {{{%%bg.light}}}
* {{{%%bg.dark}}}
* {{{%%bg.kenburns}}}
* More [Image Styles]
/%
----
See [Haddock Template], [Haddock Styles], [Image Styles], [Background Gradients], [Background Patterns]