Multiple image background

To display unique background images specific to the different sections of your site:

  1. Deploy “Extra CSS Classes”
     
    1. Appearance > Under Enabled Theme (DLC Theme), click Settings > click CSS Classes
    2. Check all options under “Extra CSS Classes.”
    3. Scroll to the bottom and click “Save configuration.”
    4. You can now specify background images based on the path (URL) of your pages and sections.
       
  2. Confirm URL aliases are correctly configured so that images can be assigned by CSS rule based on their page’s URL:
     
    1. Configuration > Search and metadata> URL aliases
    2. This lists all your pages, showing the Drupal node ID of the page on the right and the auto-generated human-readable URL (extracted from the title you gave the page when you created it) on the left.
    3. Confirm that your human-readable URLs are consistent:
      1. A page titled "About" should have a URL of "/about."
      2. A sub-page under "About" titled "Research" should have a URL of "/about/research."
      3. A sub-page under "About" titled "Our Faculty" should a URL of /about/our-faculty."
      4. Based on consistent URL patterns, Drupal can now assign styles to sections of your site.
         
  3. Create a single style sheet to display any number of discrete images on any section or page:
     
    1. For the home page, add a rule to your core CSS style sheet as follows:
      .front {
      background-image: url(copy URL from image upload area below.jpg);
      }
    2. For second-level pages, add a rule to your core CSS style sheet as follows:
      .section-about {
      background-image: url(copy URL from image upload area below.jpg);
      }
    3. If you want to assign a unique image to, say, /about/our-faculty, add a rule to your core css style sheet as follows:
      .section-about-our-faculty {
      background-image: url(copy URL from image upload area below.jpg);
      }