Table of Contents

About

The background element defines and adds a background.

It's mostly used with bar component to create compelling landing page.

You can create cover or tile background with:

The background area is defined as being the content plus the padding

Syntax

<background
     fill="cover|tile"
     color="value"
     pattern="name"
     pattern-color="colorValue"
     opacity="0 to 1"
     scroll="local|fixed"
     >{{image}}</background>

where:

  • image is to use an image (raster or svg) as background
  • fill defines how the image takes the space of its container.
    • cover (default) - The image is scaled within its container and cropped, if necessary (ie responsive background)
    • tile: The image is repeated until the container is filled.
  • color: defines a background color - if you have set an image, the color value is seen while the image is loading.
  • pattern and pattern-color are used to define the css_pattern name and color respectively.
  • opacity brings depth level on color. Value goes from 1 (no opacity, default) to 0, completely opaque, not visible). By layer, below are typical values.
    • First: 0.15
    • Second: 0.3
    • Third: 0.45
    • Fourth: 0.6
    • Fifth: 0.75
    • Sixth: 0.9
  • scroll: the scroll effect - how the background is moving while scrolling
    • local: the image is moving with its container
    • fixed: the image stays at the same position on the screen
  • If you set more than one background, the first background in the list is the farthest on the stack.
  • The background area is the content plus the padding but not the margin.

Color

You can set a background color with:

All color value (name and hex) described in the color page are supported.

Uniform Color

<note info>
<background color="light"></background>
==== Background Color ====
A info note with a bootstrap light color as background
</note>
Background Color

A info note with a bootstrap light color as background

The background-color attribute is just a short cut. 

<note info background-color="#6FE2E9">
==== Direct Background  Color ====
A info note with the background-color attribute
</note>
Direct Background Color

A info note with the background-color attribute

Gradient Color

ComboStrap implements also a gradient color naming scheme in order to show a linear color gradient in the background.

If you want to have a gradient on your color, just add the gradient- prefix to a color value.

Example with a light gradient background. 

<bar background-color="gradient-light" hero="md">
=== A gradient light slide ===
</bar>
A gradient light slide



If you want to have full gradient customization, you can add a gradient css style in your theme

The below CSS style gradient generator may help you in this task.

Because the gradient generated a image, you can't use a gradient color and an image at the same time in a background element. You just need to add another background.

Raster Image

This sections shows you how to use a raster image as background.

Raster Cover

<bar color="steelblue" align="text-center" >
   <background opacity="0.3">{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
    <heading 2>A blue slide</heading>
    <text lead>
**A blue slide with a little bit of opacity on the background image to increase contrast with the heading.  \\
A complete solution to building great landing pages.**
     </text>
</bar>
A blue slide

A blue slide with a little bit of opacity on the background image to increase contrast with the heading.
A complete solution to building great landing pages.

You will find plenty of background image on image bank such as:

Raster Tile

Create a tile background based on a raster image that represents a pattern. 

<bar align="text-center" height="20vh">
<background fill="tile" opacity="0.5">{{:docs:styling:patternico.png|}}</background>
<title 3>**A tile background based on icons**</title>
</bar>
A tile background based on icons
<bar align="text-center" height="30vh">
<background fill="tile" opacity="0.1">{{:docs:styling:subway-lines.png}}</background>
<heading 2 color="#3669b3">A tile background based on subway lines</heading>
</bar>
A tile background based on subway lines

You will find plenty of tile patterns generator on the web such as

Svg

Svg Cover

A svg can be used as background cover. Their dimension are constraint only by their parent.

bgjar can generate a lot of different type of svg background cover

Example with a stacked wave where the colors were changed with attractive colors. 

<bar align="text-center">
<background>{{:docs:styling:stacked_wave.svg|}}</background>
<heading 1>A svg background cover</heading>
</bar>
A svg background cover

Svg Tile

A svg can also be used as a background tile. They got by default a size of 192px

Below is an example on how to use a svg as a tile background with a the heropatterns jigsaw tile pattern where

  • the foreground color is just the color of the svg (ie color=#9C92AC)
  • the background color is the background color (ie color=“#DFDBE5”)
  • the opacity is the just the background opacity
  • the size was adjusted to 50px
<bar align="text-center">
    <background fill="tile" color="#DFDBE5" opacity="0.3">{{:docs:styling:jigsaw.svg?50&color=#9C92AC|}}</background>
    <heading 1>An Svg Tile Based on Hero Pattern</heading>
</bar>
An Svg Tile Based on Hero Pattern

CSS Pattern

CSS Pattern are pre-created background created directly via CSS. ComboStrap supports the css pattern library with the following syntax. 

<background pattern="name[-size]" color="colorValue" pattern-color="colorValue" />

where:

  • color is the background color
  • pattern-color is the color of the pattern
  • pattern is the pattern name with its optional size. The possible values are listed below.
Name Size
checks sm (small)
grid md (medium, default)
dots lg (large)
cross-dots xl (extra-large)
diagonal-lines
horizontal-lines
vertical-lines
diagonal-stripes
horizontal-stripes
vertical-stripes
triangles
zigzag

Example: 

<bar>
   <background pattern="vertical-lines" color="#FACB0E" pattern-color="#FDE482" />
   <heading 1 align="text-center">A slide with vertical line Css Pattern</heading>
</bar>
A slide with vertical line Css Pattern