EverWeb Codebox

Background Image

A lot of good websites are completely ruined by the use a background image. Some of them are so busy and over powering that it's dificult to focus on the page content.

Another downside to using a full sized background image is the increase in page download time.

The example on this page has been fixed in position so that the content glides over it when scrolled.

The background image will also respond to changes in the browser width by using the background size property in the CSS.

To enhance the effect of the content floating over the image, the page is given a transparent black background.

So, how is this done?


The background image is set by overwriting the main styles. This code is pasted into the Head Code box. Use the site wide Head code box if the image is required on every page of the site. Otherwise use the Head Code box in the Page inspector.


<style type="text/css">

body{

background: url('{!-ASSETSPATH-!}Images/background-image.jpg') no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

/* Option - Delete if not required - See below for more info */

div.container {

background-color:rgba(0,0,0,0.7);

}

/* End of Option */

</style>


The background image is dragged into the Assets List. Control (right) click it in the assets column and select "Copy Relative File Path". Paste it into this line where marked in red...


background: url('{!-ASSETSPATH-!}Images/background-image.jpg') no-repeat center center fixed;


NOTE:

The background size property is supported in all major browsers and in Internet Explorer from version 9 onwards. The property should be present with all the vendor prefixes for maximum compatibility.

The background will not appear in the EverWeb design canvas and will need to be checked out using the Preview button or by publishing to a local folder.

If there are any HTML Snippets on the page, the background image will appear in them!

Transparent Page Background

The page background color and opacity are specified in the div.container styles...


div.container {

background-color:rgba(0,0,0,0.7);

}


To use this, the page background needs to be set to none in the page inspector.

The background opacity can be changed by altering the value marked in green from 0.1 to 0.9. The lower the value, the more transparent the background will be.

If a translucent page background is not required, the code marked in blue should be deleted and the page background set to the desired color.

Widget

Easy

The Background Slider widget can be used to insert both a responsive, full sized background image or a background slideshow with variable slide and transition times.

Click the Easy button to see the widget...