Background Image Examples

How to add a fixed scroll background images to pages using the LSCG web framework.

Instructions

  1. Select Add Background Image Paragraph
  2. Click the "Choose File" button and upload image (must be larger than 1800x1200 pixels)
  3. Pick a background size. See Small, Medium and Large Samples on this page.
  4. Copy the code of the size you want in your page (small, medium or large)
  5. Select the text field in the background image paragraph (make sure the source code button is selected when you paste the code)
  6. Paste the code in the background image text area and Click Save

Small Spacer Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.

Consectetur Adipiscing
In id porttitor tortor

Code Sample

<div class="small-spacer">
<blockquote>
<p>
<span aria-hidden="true" class="fa-quote-left fas"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
<cite>Consectetur Adipiscing<br>
In id porttitor tortor</cite></blockquote>
</div>

 

Medium Spacer Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.

Consectetur Adipiscing
In id porttitor tortor

Code Sample

<div class="medium-spacer">
<blockquote>
<p>
<span aria-hidden="true" class="fa-quote-left fas"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
<cite>Consectetur Adipiscing<br>
In id porttitor tortor</cite></blockquote>
</div>

Large Spacer Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.

Consectetur Adipiscing
In id porttitor tortor

Code Sample

<div class="large-spacer">
<blockquote>
<p>
<span aria-hidden="true" class="fa-quote-left fas"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
<cite>Consectetur Adipiscing<br>
In id porttitor tortor</cite></blockquote>
</div>