DOCUMENTATION

PRI Background

PRI Background is a module that can add image background, images slideshow and video background on your webisite pages.

PRI Background Features:

  • Image Background
  • Random Image Background
  • Slideshow Background
  • Video Background
  • Youtube Video Background
  • Vimeo Video Background
  • Fixed / Scroll image Background
  • Cover / Repeat image Background
  • Local / Extern files
  • Audio Video on/off
  • and more!

Installatuion

To install PRI Background, you need follow next steps:

1. Login to Joomla backend e.g. https://www.mysite.com/administrator

1

2. Navigate to the Extension manager.

2

3. On the install tab, click on choose file on the Package File field and locate your zipped extension file and select one. 

3

4. Click on the Upload & Install button. Once the extensions is installed successfully, will get a success message.

4

Right now you need to enable module and select position of module.

To enable module you need go to Extensions - Module Manager - PRI Background.

5

Now you need select module position and change module status to Published, after click on Save button.

Menu Assignment

You can chose between None, All and Select Menu Item(s) from the List. To assign to some but not all pages choose the third option and select the menu links that you want the module associated with.

Notes:

If your module is assigned to a position that does not exist in the template used to display a page, the module will not appear even if it is assigned to a specific page.

If your module is not published/enabled it will not appear even if assigned to a page.

1 menu assigment

Module Permissions

Here you can set user grups what can delete, edit or edit module state.

Inherited means that the permissions from global configuration, parent group and category will be used.

Denied means that no matter what the global configuration, parent group or category settings are, the group being edited cannot take this action on this item.

Allowed means that the group being edited will be able to take this action for this item (but if this is in conflict with the global configuration, parent group or category it will have no impact; a conflict will be indicated by Not Allowed (Locked) under Calculated Settings).

1 module permissions

Background Selector

Background selector is a option present in all types of background (Image, Random Image, Slideshow, Video, YouTube, Vimeo). With this option set, where want to be displayed background.

 WARNING: Module Position (set in module manager) does not establish the position of background. 

1 background selector

In this option field is set id or class of element where we want to display the background (for id is used "#idname" and for class is used ".classname"). 

Examples

Example 1 - Protostar Template

Display background as page background - Background Selector is body

2 background selector

Display background only in content box - Background selector is .container

3 background selector

Example 2 - YooTheme Nano3 Template

Display background in a section - Background Selector is .tm-top-b

4 background selector

Image Background

Image Source - Local(local server)/Extern(external server).

Background Selector - Usually "body". If want to display background inside a container you need add container id or class. (Eg: for id "#idname" and for class ".classname")

Image Source - Local(local server)/Extern(external server).

Background URL - image URL (eg: for local source "/images/image.jpg", for extern source "https://www.site.com/images/image.jpg").

Background Color - set background color.

Background Size - Auto(original image size)/Cover(cover image)/100%(image width 100%).

Background Attachement - Fixed(image stays in the same position)/Scroll(image scroll with page).

Background Position - select background position.

Background URL - image URL (eg: for local source "/images/image.jpg", for extern source "https://www.site.com/images/image.jpg").

Background Color - set background color.

Background Size - Auto(original image size)/Cover(cover image)/100%(image width 100%).

Background Attachement - Fixed(image stays in the same position)/Scroll(image scroll with page).

Background Position - select background position.

1 image background

Random Image Background

Image Source - Local(local server)/Extern(external server).

Background Selector - Usually "body". If want to display background inside a container you need add container id or class. (Eg: for id "#idname" and for class ".classname")

Image Source - Local(local server)/Extern(external server).

Background URL - image URL (eg: for local source "/images/image.jpg", for extern source "https://www.site.com/images/image.jpg").

Background Color - set background color.

Background Size - Auto(original image size)/Cover(cover image)/100%(image width 100%).

Background Attachement - Fixed(image stays in the same position)/Scroll(image scroll with page).

Background Position - select background position.

Background Images - images URLs (eg: for local source "/images/image.jpg", for extern source "https://www.site.com/images/image.jpg").

Background Color - set background color.

Background Size - Auto(original image size)/Cover(cover image)/100%(image width 100%).

Background Attachement - Fixed(image stays in the same position)/Scroll(image scroll with page).

Background Position - select background position.

1 random image

Slideshow Background

Background Selector - Usually "body". If want to display background inside a container you need add container id or class. (Eg: for id "#idname" and for class ".classname")

Images Source - Local(local server)/Extern(external server).

Background Images URL - images URL separated by comma (eg: for local source "/images/image.jpg", for extern source "https://www.site.com/images/image.jpg").

 Slideshow Duration - set slideshow duration in ms.

Slideshow Fade Duration - set fade duration in ms.

1 images slideshow background

Video Background

Background Selector - Usually "body". If want to display video inside a container you need add container id or class. (Eg: for id "#idname" and for class ".classname")

Video Source - Local(local server)/Extern(external server).

Background Video MP4 - video URL (eg: for local source "/video/video.mp4", for extern source "https://www.site.com/video/video.mp4").

Background Video Webm - video URL (eg: for local source "/video/video.webm", for extern source "https://www.site.com/video/video.webm").

 Background Video Ogg - video URL (eg: for local source "/video/video.ogg", for extern source "https://www.site.com/video/video.ogg").

Background Poster - poster URL (eg: for local source "/video/image.jpg", for extern source "https://www.site.com/video/image.jpg").

Background Position - if display video in a container you need select Absolute.

Background Loop - loop video background.

Background Video Audio - enable/disable sounds for video. 

1 video background