Drupal Landing Page Banner Image Sizes

SSU's Drupal Theme offers 3 sizes of banners for Landing Pages.

Landing Page Banner Image Sizes
Banner Name Image Size
Header Slideshow - Standard 1440 x 600 pixels
Header Slideshow - Full 1440 x 600 pixels
Header Slideshow - SSU Homepage 1440 x 805 pixels

 

Images that are larger or smaller than this will be scaled and cropped to those dimensions.

Be careful when selecting images for the banner.  Please consider the following.

  • Images that are much smaller will lose image quality when displayed at a larger size.  Up-scaling a little bit might be acceptable, but up-scaling a lot will look bad.
  • SSU's Drupal Theme includes a blue stripe at the top of the page.  This is semi-transparent and overlays the banner image.  When selecting an image, make sure the composition of the image will fit within the visible area.  The top blue stripe's height is 89 pixels on most desktop/laptop screens. 
  • SSU's Drupal Theme adds a dark transparent overly over the bottom portion of the banner, and a wave or swoosh element at the bottom of the banner display area.  On Full banner, the overlay is a transparent image of overlapping dark waves.  On the Standard banner, the overlay is a transparent background gradient.  This dark area improves the color contrast between banner text and image, ensuring accessibility.
  • Standard banners don't display the entire height of the image.  As the browser window is resized, the image stretches to fill the width of the window, changing the total amount of the height of the image that is displayed, and how much of the top of the image is covered by the top blue stripe.
  • In most cases, images of text don't work well. On most banners, a department title and tagline are displayed overlaying the banner image.  If the image is of text, it's likely the title and tagline will overlay and obstruct the image text.  Also, banner images resize and parts of the image may be obscured.

illustration of standard banner with labels showing the pixel height of the blue stripe, the banner display and the actual image.