Background styling - Add any background to your ComboStrap component

Undraw My Documents

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Landing Template Value
How to create a landing page?

This article shows you how to create a landing page with the markup component A landing page is a page with big horizontal sections that shows off your product or services. For your page, you should...


Recommended Pages
Undraw Website Builder Re Ii6e
A bar - A horizontal region

They are use to slice a page into section
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
Spacing Margin Padding
ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding between block component where: margin is a transparent space outside the box (not filled with the background color) padding is the space inside...
Undraw Website Builder Re Ii6e
ComboStrap UI - Jumbotron

A jumbotron is a default Hero unit that emphase prominently its content. buttonleadtexthorizontal rule A jumbotron is a hero unit style content with a medium value by default where: the Hero...
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...
Undraw My Documents
How to set the Opacity / Alpha or Transparency

The opacity attribute permits to set the opacity (alpha/transparency) of any component.
SVG to fitViewport 1Viewport 2--------------- meet ---------------xMin*xMid*xMax*---------- meet ----------*YMin*YMid*YMax---------- slice ----------xMin*xMid*xMax*--------------- slice ---------------*YMin*YMid*YMax
How to use a SVG in ComboStrap

ComboStrap supports natively SVG and allows you to use them as image, illustration and background
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner