To display unique background images specific to the different sections of your site:
- Deploy “Extra CSS Classes”
- Appearance > Under Enabled Theme (DLC Theme), click Settings > click CSS Classes
- Check all options under “Extra CSS Classes.”
- Scroll to the bottom and click “Save configuration.”
- You can now specify background images based on the path (URL) of your pages and sections.
- Confirm URL aliases are correctly configured so that images can be assigned by CSS rule based on their page’s URL:
- Configuration > Search and metadata> URL aliases
- 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.
- Confirm that your human-readable URLs are consistent:
- A page titled "About" should have a URL of "/about."
- A sub-page under "About" titled "Research" should have a URL of "/about/research."
- A sub-page under "About" titled "Our Faculty" should a URL of /about/our-faculty."
- Based on consistent URL patterns, Drupal can now assign styles to sections of your site.
- Create a single style sheet to display any number of discrete images on any section or page:
- 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);
} - 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);
} - 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);
}
- For the home page, add a rule to your core CSS style sheet as follows: