![]() Once done, click on the button Update and save. Select the option " Use as background" to use the image as a background image. You should see the images you added in step 3.2. At the bottom of the page, unravel the fieldset called Dynamic Background.In the left navigation menu, click on General.Edit the page where you want to display a background image. If you only wish to enable the background image on a specific page (Panel pages only), follow the steps below: Selecting this option will enable the image as a background image for the entire site. Once the page reloads, you will see the option " Use picture as background" beside the image.Once done, click on the button Save configuration at the bottom of the page to upload the file. Repeat for any other images you wish to use. Under Background image 1, click on the button Choose file to select the file you wish to use as a background.Continuing from Step 2, click on the tab Background Images located at the top-right of the page.If you do not see this tab, please verify the permissions (step1.2). Repeat step 2.2 and 2.3 for the Panels tab located at the top-right of the page.Once done, click on the button Save configuration.CSS: Copy and paste the attributes below. ![]() Allowed file types: Leave the default values.Number of images: Enter the number of images you wish to upload.Under the Settings tab, enter the following values:.At the top-right of the page, click on the tab Settings. Here, you should see a message stating that you have not yet configured Dynamic background. Under USER INTERFACE, click on Dynamic background. It is also advised that you only add the background image to a single or select number of pages, as opposed to setting it site-wide. Given this, you should avoid having any other images or slideshows on a page that has a background image. In terms of usage: Background images should only be used to make a bland, textual page more interesting. In terms of design, as a rule of thumb: (1) your image should not visually distract users from the content of the page, so avoid busy images, images with dark colours or images with text (2) the image filesize should be as low as possible to not slow down page load, especially on mobile devices. You need to discuss the addition of a background image with the Communications Directorate in order to have it reviewed and approved. There is an Elementor setting which makes it insert the CSS declarations in the HTML rather than in an external file. Sites currently using a dynamic background image include the International Office, uOttawa Card, Undergraduate student guide, Financial aid and awards, among others. The following guide details how to add a background image to an entire site (discouraged) or to a single Panel page. Example of a website using a dynamic background image
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |