[Version 2] Change Your Homepage Header Image Styling

Prior to making the changes below, you will navigate to the custom CSS page of your Admin panel. Click "Design" on your left navigation bar, and then go to "Custom Styles".

Make Header Images Appear Lighter or Darker

This is especially helpful if the image is appearing too dark, or the text and image aren't contrasting enough for your users to read.

To lighten or Darken an Image, we use the pseudo-class of “before” to add a layer to the image. To make these changes to the homepage header, use the following CSS code with an RGBA value, where the A (alpha) parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Feel free to experiment with the alpha value until it looks good for your specific image. Hit Save when finished and refresh the page to view your changes!

<code>.home-header:before {     background-color: rgba(0, 0, 0, 0.1);}

The above applies to the homepage header image. To make this change for your other pages (Sign Up, or Donate, for example), you can do the same thing and use the selector below:

<code>.page-header:before      {background-color: rgba(0, 0, 0, 0.2);}

Add a Transparent Background Colour to a Black and White Header Image

For a neat effect, you can upload a black and white image as your homepage banner. Then, you can add a transparent background color (lighter colors work well) using RGBA colors to define the level of transparency.

<code>.home-header:before {     background-color: rgba(14, 207, 221, 0.58);}

To ensure that this takes effect on all of your pages, it would be helpful to also include .page-header:before in your CSS.

Below is an example of how this looks!

Change the Position of Your Header Images

Our background images are set to 50%, 50% to centre the image that you uploaded. If you need to change this positioning, you can move the image around within its container. This is a good idea if faces are obstructed by the donation form, or your logo is interfering with a key element in the photo.

The first value is the horizontal position and the second value is the vertical. Replace the values above until you get the image positioned where it needs to be

For your homepage header:

<code>.home-header {     background-position: 70% 30%;}

Since page headers are much smaller than homepage headers, you may need to change the positioning of your page headers a bit more:

<code>.page-header {     background-position: 80% 20%;}

Note that some images may never position properly and it might be best to switch images.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us