Joomla Full Screen Background Image

Introduction

Thank you for download the Joomla Full Screen Background Image module!

Full Screen Background Image is a Joomla module that lets you add beautiful full-screen backgrounds to your site. This documentation will help you understand the requirements and usage of the Full Screen Background Image module. It covers installation, usage, and support.

Please read this documentation for more information on how to use Full Screen Background Image and its options.

Requirements

You do not need to be a web developer to install or use Full Screen Background Image.

Full Screen Background Image requires Joomla version 3.x and 4.x and newer. Older versions have not been tested.

Installation

To Install the Full Screen Background Image Module, please follow our step by step guideline::

  • Step1: Download the Full Screen Background Image in your local machine (Computer).
  • Step2: Login to the administrative area of your Joomla website.
  • Step3: Go to Extensions Manager from top menu: Extensions( or, Extensions Manager ) -> Manage.
  • Step4: Now find Browse(Choose File) button under Upload & Install Joomla Extension and hit the Browse button, browse to the location of downloaded Full Screen Background Image Module(zip file) on your local computer, and press the Upload & Install button.
  • Step5: When you install the extension successfully, go to: Extensions ( or, Extensions Manager ) >> Modules (or, Module Manager).
  • Step6: Now Config Your Module
  • Step5. After Complete configure the extensions hit Save & Close button.

Joomla Full Screen Background Image Module has lots of options. You will find them from the Module Settings tab.

To Basic configure the Full Screen Background Image, please follow our guideline:

  • Step1: Go to Extensions Manager from top menu: Extensions ( or, Extensions Manager ) -> Modules ( or, Module Manager ).
  • Step2: Find the Full Screen Background Image and enter.
  • Step3: Set Module Position from the drop-down list.
  • Step4: Set Module Status Published.
  • Step5: Select menu from Menu Assignment Tab.
  • Step6: Now upload your image.
  • Step7: Now explore all settings tab and configure them as your own demand. Please read option tooltip information carefully for configure.
  • Step8: Now Save and enjoy.

All Options

Description of all available options of Full Screen Background Image for Joomla.

In this section, labels are used to help understand the usage. When an option has a label it means that option is available for that particular type of background only.

During Module configure please read settings option tooltip information carefully to properly understand the option.

Basic Settings

  • Media Player Type:
    Select what type of media you will be using for the background. Available options are YouTube, Vimeo, Dailymotion, Wistia, HTML5, Image, or Color. Only Image, or Color available at Free Version..
  • Upload Image:
    Upload a Background image with appropriate dimension.
  • Media Overlay:
    Enable or disable displaying an overlay pattern or overlay color over the media. Enter ‘No’ to disable or ‘Yes’ to enable. Default is ‘Yes’.
  • Overlay Pattern:
    Select a suitable Pattern for background. Experiment with the available patterns as some will look better on some media backgrounds than others.

    Remember that if you prefer not to use an overlay pattern but still want to use an overlay color then select ‘Transparent ‘ and in the option Overlay Color select the color code you want for the overlay.

  • Overlay Color:
    Select the color you want to use for the overlay.

    Remember that if you prefer no overlay pattern but still want to use an overlay color then select ‘transparent’ in the Overlay Pattern.

  • Overlay Color Opacity:
    Enter the Opacity you want to use for the overlay color.
  • Custom Style:
    If you need additional CSS please write here.

Page Settings

  • Page Up Down:
    Page-Up-Down (PUD) allows the page to be scroll up and down to have a better view of the media.
    Enter NO to disable or Yes to enable. Default is Yes.
  • PUD Element:
    The HTML id name or class name of the element to use for the PUD option (i.e. #wrapper or .container). This element will be what gets scrolled up and down when PUD is enabled. Default is #page.
  • PUD Down:
    Enable to scroll down the PUD Element when the media playback starts. Enter NO to disable or Yes to enable. Default is NO.
  • PUD Up:
    Enable to scroll up the PUD Element when the media playback ends. Enter NO to disable or Yes to enable. Default is NO.
  • PUD Show:
    Amount of the PUD PUD Element to show in pixels when PUD is in the down position. This keeps part of the PUD Element in view such as to show the logo and/or navigation during the PUD down status, it depends on the content inside the selected PUD Element.

    Enter the value in pixels (i.e. for 145px you will enter 145). Default is 0.
  • Fade In Out:
    Fade-In-Out (FIO) lets you set an opacity (transparency) effect for a better view of the media background.
    Enter NO to disable or Yes to enable. Default is Yes.
  • FIO Element:
    The HTML id name or class name of the element to use for the FIO option (i.e. #wrapper or .container). This element will be what gets the opacity applied too when FIO is enabled. Default is #page.

    Recommended to use the same HTML element as PUD but it is not necessary. You may select any HTML element you see fit for your desire outcome.

  • FIO Opacity:
    Set the amount of opacity for the FIO Element. Acceptable values are 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1. Default is 0.5.
  • FIO Start:
    The FIO Element will fade-out when the media playback starts. Enter NO disable or Yes to enable. Default is NO
  • FIO End:
    The FIO Element will fade-in when the media playback ends. Enter NO to disable or Yes to enable. Default is Yes.
  • Enlarge By:
    Use with caution, enlarge only what is necessary. Useful for hosted videos such as YouTube and Vimeo to hide unwanted objects. Remember that the more you enlarge the video the more chances it may lead to choppy video play.
    Enter the value in percentage (i.e. for 10% you will enter 10). Default is 0.
  • Page Visibility Pause:
    Allows the media to be pause when the user minimizes the browser or moves to another window tab. Enter NO to disable or Yes to enable. Default is Yes.

Controller Settings

  • Display Controls:
    Display the play, audio, & PUD button. Enter NO to disable or Yes to enable. Default is Yes.

    Color backgrounds do not display the controls.

  • Controls Location:
    The location to place the controls on the screen. You can select to place the controls on the bottom right, bottom left, top right, or top left of the page.
  • Control Color:
    Color for the control buttons.
  • Control Color Opacity:
    Opacity for the control buttons Color.
  • Control Background Color:
    Color for the control background.
  • Control Background Color Opacity:
    Opacity for the control background Color.
  • Enable Scroll To Top Button:
    Display scroll-to-top button in the controls panel. Default is Yes.

Support

If further help is needed you can go to our support page . We’ll do my best to help you.