# ComboStrap Styling - Background

The background element defines and adds a background.

It's mostly used with slide 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:

• the color attribute of the background component
• via the background-color attribute on all component

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

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

Example with a light gradient background.

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


If you want to have full gradient customization, you can add a gradient css style in the userstyle

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

<slide color="steelblue" text-align="center" >
<background opacity="0.3">{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
<title 2>A blue slide</title>
**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.**
</typo>
</slide>


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

<slide text-align="center" height="20vh">
<background fill="tile" opacity="0.5">{{:docs:styling:patternico.png|}}</background>
<title 3>**A tile background based on icons**</title>
</slide>


### A tile background based on icons

<slide text-align="center" height="25vh">
<background fill="tile" opacity="0.1">{{:docs:styling:subway-lines.png}}</background>
<title 2 color="#3669b3">A tile background based on subway lines</title>
</slide>


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

<slide>
<background>{{:docs:styling:stacked_wave.svg|}}</background>
<title 1>A svg background cover</title>
</slide>


# 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
<slide text-align="center">
<background fill="tile" color="#DFDBE5" opacity="0.3">{{:docs:styling:jigsaw.svg?50&color=#9C92AC|}}</background>
<title 1>An Svg Tile Based on Hero Pattern</title>
</slide>


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

<slide>
<background pattern="vertical-lines" color="#FACB0E" pattern-color="#FDE482" />
<title 1>A slide with verticale line Css Pattern</title>
</slide>