EverWeb Codebox

BackStretch

Responsive Background Image Using jQuery

jQuery BackStretch

If it is really necessary to insert a full size background image then jQuery is the way to go.

The background image on this page has been inserted using the jQuery plugin BackStretch. The background is fixed. Scroll the page to content to see this effect.

The background image used is the same as for the previous page. In this case it is stretched across the browser width and from top to bottom.

Go to the BackStretch Website to download the file.

Both the background image and the backstretch.min.js files are dragged into the Assets column in EverWeb.

Open TextEdit.app and paste in the following code...


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="Relative path to the/jquery.backstretch.min.js"></script>

<script>

$.backstretch(["Relative path to the background image"]);

</script>


Control click the backstretch.min.js file in Assets and select "Copy Relative File Path".

Select the text in red and paste - Command V

Control click the background image file in Assets and select "Copy Relative File Path".

Select the text in blue and paste - Command V


This code is going to be pasted into the Footer Code box in the Page inspector if you only want the background image on one page of your site.

Paste it into the site wide Footer Code box in the Site Publishing Settings page if you want it on every page of the site.

Select the cody and copy it to your clipboard - Command C - and then paste it into the appropriate box.


Note that this page has had the browser background set as black and the page background set as "none" in EverWeb.

The container div is then given a translucent background with these styles...


<style type="text/css">

div.container {

background-color:rgba(22,0,0,0.5);

}

</style>


... so that the background can be seen behind the content.

The EverWeb generated container div has had 0.5 opacity applied to it. This can be varied to adjust the visibility of the content as necessary.


NOTE: This page has been made deliberately long so that the effect of the fixed background can be seen when scrolling.

Click HERE to go to the downloads page to get a copy of the backstretch javascript file.

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