ComboStrap Styling - Background

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:

• raster image
• svg
• color (uniform or gradient)
• css pattern

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

Color

You can set a background color with:

• the color attribute of the background component
• via the background-color attribute on all component
• or any bootstrap background utility class in the class attribute

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>

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>

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>

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.

• https://gradienta.io/
• https://www.gradientmagic.com/

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>

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

• https://unsplash.com/backgrounds
• https://www.pexels.com/
• https://stocksnap.io/

Raster Tile

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

• Patterns icon

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

• The pattern library subway lines

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

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

• SubtlePatterns
• Transparent textures

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>

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>

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.

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>