Page Background

The Page Background control group is located in the Site Info control pane.

Page Background

Your page background is one of the most important visual choices you can make for your website, and CE2 gives you several options.

Page Background Color

The most basic and most important choice to make here is your Page Background Color.

Page Background Color

Your background sets the tone for the rest of your website; it's the canvas on which you will create all that remains of your design. Should you choose to utilize other background options – gradients or images – your basic Page Background Color remains of great importance. For older browsers not supporting CSS3 gradients, your Page Background Color will be used as a fallback. In situations where your background image fails to cover the full viewport of the browser, your background color will be visible beyond the image boundaries.

To wit, do not neglect to set an appropriate background color, even when you intend to cover it up!

Page Background Gradient

Background gradients are an easy way to give your site a sleek, modern look. CE2 supports three variations of gradients using two colors.

Page Background Gradient

Gradient Type: Linear A-B Fixed fades Gradient Color A into Gradient Color B over a fixed distance measured in pixels. The gradient will always cover the same distance, regardless of the size of the viewport.

Gradient Type: Linear A-B Relative fades Gradient Color A into Gradient Color B over a changing distance measured as a percentage of the page size. Your gradient will appear at different sizes depending upon the size of the page. If you want your gradient to cover the entirety of the background, set Gradient Size to 100%.

Gradient Type: Linear A-B-A fades Gradient Color A into Gradient Color B at the center of the viewport, then fades back into Gradient Color A at the far edge. This type of gradient always covers the entirety of the page (i.e. coverage width and height are 100%).

For all gradient types, the Gradient Direction is set by degrees, with acceptable values ranging from -360 degrees to +360 degrees, and 0 (zero) as a midpoint. Common values are:

0 (zero) :: Horizontal A-to-B fade, from left to right.

-45 :: Diagonal A-to-B fade, from top-left to bottom-right.

-90 :: Vertical A-to-B fade, from top to bottom.

Background gradients may be used together with background-images (see below). Gradients will appear beneath images.

Gradients are implemented using CSS3 and are not supported by many older browsers. In such cases, Page Background Color will be displayed instead. CSS3 gradients are supported in current versions of Chrome, Safari and Firefox; Internet Explorer 9 does not support CSS3 gradients.


Page Background-image

Background-images may be used as your page background. Two options – Simple and Advanced CSS3 – are offered, with usage instructions appearing within the control panel. A handful of generic background images are included in CE2 engines, or you may add your own image to the /resources/backgrounds/ folder within the .lrwebengine package.

Background images may be used in conjunction with gradients, and will appear on top of the gradient background.

Background images may be .jpg, .png or .gif files.

Stack Order

Backgrounds are layered in the following top-to-bottom order:

  • Background-image
  • Background gradient
  • Background color