• 01323 735800

Menu

    • Background image plugin

      You can easily select an image as a background to the page, or any part of the site with an ID or class (you'll need to check the template for the last two).

      With several options to mod the look and how the background displays.

      Demo mode

      The above section has been selected within the container, and the display type has been set to Set full screen fixed

      Demo div
      Demo div

      Edit mode

      Background image plugin update dialog

      Image

      Select the image that you wish to display as the background image from the file manager. Be sure to select an image big enough to cover the area. If you are displaying it as a full page background image, then make sure it is roughly 1920 x 1080, but no bigger.

      Container

      If this field is left blank, then the image and settings will be applied to the body tag of the page. Otherwise, you can enter either a class or id, prefixed with the appropriate hash or full stop.

      Image size

      The CMS automatically resizes images to fit the browser so that they are optimised. This only works when the Display type is set to Set full screen or Set full screen fixed.

      Display type

      The display type alters how the image is displayed. There are a few options, depending on your image, size and container.

      • Set full screen - Sets the image to fill the full space of the element, resizing the image to cover the entire area completely while keeping its aspect ratio. The image will move with the scroll if there is a container selected.
      • Set full screen fixed - Does the same as the image above. The only difference is that the image sticks with the browser, and doesn't move with the scroll. The content scrolls over the image.
      • Basic - Doesn't do any resizing, and lets the positioning fields further down deal with the image position.
      • Tile - Keeps the image the same size, but tiles the image to cover the area horizontally and vertically.
      • Tile horizontally - Tiles the image horizontally only to cover the area.
      • Tile vertically - Tiles the image vertically only to cover the area.

      Position left

      Sets the horizontal position of the image, which you can select from left, center or right.

      Position top

      Sets the vertical position of the image, which you can select from top, center or bottom.

      American spelling

      For the grammar police out there not familiar with HTML and CSS, we know that the spelling above for centre is the american version, but that is the correct spelling for setting the positions in styling within CSS. For further reading, please view W3 Schools.

      Advanced options

      The Advanced options are there for adding further styling related to the background image. The styling is inserted after the styling set above, but not within any classes or ID's, so you will need to provide those.

      Background image plugin update dialog advanced options

      It basically just inserts the text given at the end of the styling tags.