---json
{
    "description": "The background element permits you to add any background to your ComboStrap component in an easy and declarative way.",
    "page_id": "vz4upjyihwsqne30iv31e",
    "title": "Background styling - Add any background to your ComboStrap component"
}
---
====== ComboStrap Styling - Background ======


===== About =====
The ''background'' element defines and adds a background.

It's mostly used with [[:docs:layout:component:bar|bar component]] to create compelling [[howto:landing-page|landing page]].

You can create ''cover'' or ''tile'' background with:
  * [[#raster image|raster image]]
  * [[#svg|svg]]
  * [[#color|color (uniform or gradient)]]
  * [[#css pattern|css pattern]]



The ''background area'' is defined as being the content plus the [[docs:styling:spacing|padding]]


===== Syntax =====


<code dw>
<background
     fill="cover|tile"
     color="value"
     pattern="name"
     pattern-color="colorValue"
     opacity="0 to 1"
     scroll="local|fixed"
     >{{image}}</background>
</code>
where:
  * ''image'' is to use an [[docs:content:image|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|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|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


<note>
  * 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 [[docs:styling:spacing|padding]] but not the margin.
</note>






===== 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 [[https://getbootstrap.com/docs/5.0/utilities/background/|bootstrap background utility class]] in the [[class|class attribute]]

All ''color'' value (name and hex) described in the [[color|color page are supported]].
==== Uniform Color ====

<webcode name="Default" frameborder="0">
<code dw>
<note info>
<background color="light"></background>
==== Background Color ====
A info note with a bootstrap light color as background
</note>
</code>
</webcode>


The ''background-color'' attribute is just a short cut.
<webcode name="Default" frameborder="0">
<code dw>
<note info background-color="#6FE2E9">
==== Direct Background  Color ====
A info note with the background-color attribute
</note>
</code>
</webcode>


==== Gradient Color ====
[[:start|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|color value]].


Example with a ''light gradient'' background.
<webcode name="Default" frameborder="0">
<code dw>
<bar background-color="gradient-light" hero="md">
=== A gradient light slide ===
</bar>
</code>
</webcode>

\\
\\

If you want to have full gradient customization, you can add a gradient css style in your [[:howto:theme-creation|theme]]

The below CSS style gradient generator may help you in this task.
  * https://gradienta.io/
  * https://www.gradientmagic.com/

<note important>
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.
</note>


===== Raster Image =====

This sections shows you how to use a [[docs:content:raster|raster image]] as background.

==== Raster Cover ====

<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>

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 [[docs:content:raster|raster image]] that represents a pattern.

  * [[https://patternico.com/|Patterns icon]]
<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>
  * [[http://thepatternlibrary.com/#subway-lines|The pattern library subway lines]]
<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>

You will find plenty of tile patterns generator on the web such as
  * [[https://www.toptal.com/designers/subtlepatterns/|SubtlePatterns]]
  * [[https://www.transparenttextures.com/|Transparent textures]]



===== Svg  =====

==== Svg Cover ====
A [[docs:content:svg|svg]] can be used as ''background cover''. Their dimension are constraint only by their parent.

[[https://bgjar.com/|bgjar]] can generate a lot of different type of [[docs:content:svg|svg]] background cover

Example with a [[https://bgjar.com/stacked-wave.html|stacked wave]] where the colors were changed with [[color_generator|attractive colors]].

<webcode name="Default" frameborder="0">
<code dw>
<bar align="text-center">
<background>{{:docs:styling:stacked_wave.svg|}}</background>
<heading 1>A svg background cover</heading>
</bar>
</code>

</webcode>


==== Svg Tile ====
A [[docs:content:svg|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 [[docs:content:svg|svg]] as a ''tile'' background with a [[https://www.heropatterns.com/|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''
<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>





===== CSS Pattern =====

CSS Pattern are pre-created background created directly via CSS. ''ComboStrap'' supports the [[https://bansal.io/pattern-css|css pattern library]]
with the following syntax.


<code dw>
<background pattern="name[-size]" color="colorValue" pattern-color="colorValue" />
</code>
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:
<webcode name="Default" frameborder="0">
<code dw>
<bar>
   <background pattern="vertical-lines" color="#FACB0E" pattern-color="#FDE482" />
   <heading 1 align="text-center">A slide with vertical line Css Pattern</heading>
</bar>
</code>
</webcode>