Skip to content Skip to navigation

Styling on Sites: Header Image Fun

Recently a couple of clients wanted to add a background banner image to their site.  This is a great option for a site that is more text heavy.  With the administrator role, you can use CSS injector to make your site look unique.

The instructions listed here refer to themes where header background image is not an option.  If you are using the Stanford Light theme, you can easily add a background image to the header from the theme options.

Preparing the image

There are a couple ways to host your image online:

  1. In your dept/group/personal AFS web space.  Refer to the IT Services page on Transferring Files to AFS.
  2. On your Drupal website, create a page and add the image as an original size so you can copy the direct URL to the image. Save the page in an unpublished state.  The path to the image still works.  Refer to SWS User Guide on inserting an image into the WYSIWYG editor.

Configure the image

  1. Be sure to enable the CSS Injector module.
  2. From the admin menu bar, navigate to Configuration > Development > CSS Injector
  3. Click the Create a new rule link.
  4. Copy and paste the code below.  You will need to provide the URL link and adjust the padding etc. to fit your website.
#header {
    background-image: url("https://somesite.stanford.edu/../sites/default/files/image.png");
    padding: 40px 0 50px;
    margin: 0 0 10px 0;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}

Things to consider when choosing a background banner image

  • Contrast. The site title should still be legible.  Keep the image clean and uncomplicated.
  • By getting clear on your site goals, this will help in choosing the right image.

 

Categories: