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.
The above section has been selected within the container, and the display type has been set to Set full screen fixedDemo div
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.
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.
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.
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.
Sets the horizontal position of the image, which you can select from left, center or right.
Sets the vertical position of the image, which you can select from top, center or bottom.
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.
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.
It basically just inserts the text given at the end of the styling tags.