[Internal] Blurry Background Image: Clear it up
Introduction
This guide provides step-by-step instructions for clearing up a blurry background image by supplying the appropriate CSS code. Background images become blurry because they "stretch" during scrolling to accommodate the height of the content when the content exceeds 1028px. The code included in this guide will enable the image to scroll with the content, rather than stretch.1) Choose the module with the blurry image from the Manage Launch Module dropdown and click Go.
2) In the Status area click Preview.
3) Navigate to the page with the blurry background image. Keep this page open.
4) Return to the Management Console Home page on
the previous tab,
5) Click Administration.
7) In the Edit Theme form, on
the Styles dropdown, select Create New.
8) Enter the file name deblurry for the new CSS code you're going to enter into the Styles textbox.
9) Copy the following code and paste it into the code textbox:
/* Fixing Blurry Parallaxed Background Image on pages with a lot of Content */
.parallax-background {
background-position: center center !important;
background-attachment: scroll !important;
max-height: 1028px;
position: cover;
}
/* End Blurry Parallaxed Background Image code*/
10) Click Save.
11) Switch back to the tab with blurry background image.
12) On the keyboard, click Shirt+F5 to refresh the screen and clear the cache. The background image should refresh and not appear as blurry.
|
NOTE: Sometimes the background image might still move very slightly. However, it should appear better than it was. If the background image still moves slightly, send the following note to the client or individual requesting the blurry background image to be fixed: We apologize as we are not able not get it perfect. Parallax images are incredibly hard to override.
|
Related Articles
[Internal] Gray Filter: Remove From the Background Image
Introduction Some clients prefer to have the gray background filter removed. This guide demonstrates how. Remove the Gray Filter 1) Log into the Management Console, enter into the client's organizational unit and click Administration. ...[Internal] Image Override: Create One
Introduction This guide provides step-by-step instructions for creating an image override as part of a theme override. NOTE: Refer to the following guides to create an override: Single module: Create a Theme Override That Applies to One Client Module ...[Internal] Support Guide Index
Introduction This index provides an easy way to jump to any internal support guide without having to navigate to find it . Admin Intake Screen: Setting up a Pre-filled Email Address Organizational Unit: Create a New One Reports: Understanding Them ...[Internal] Theme Override Index
Introduction This index provides a list of overrides you can make to a theme, which includes a link to the step-by-step guide for doing each one. To jump to a guide, just click on the override. Background Image Blurry Background Image: Clear it up ...[Internal] Images in a Theme: Editing
Introduction This document provides step-by-step instructions for editing images in a theme. 1) The current image will need to be removed first. To remove an image, select the Remove checkbox next to the image and click Save. 2) The "Save ...