Joomla – Different Header Image On Each Page
Display a different header image at the top of each page + logo and text.
Goal: Different header background images at the top of each page, but same logo and text on top of each photo.
Theme: Ximenia by RocketTheme
Theme Position: Showcase
Joomla: 3.0.x
Live example will be: http://sd.califaep.org/awards-event
1. Create a Custom HTML Module
- Module tab: add logo image and text
- Module tab: Position dropdown: choose showcase-a
- Module Assignment tab: assign all relative pages
- Advanced tab: Module Class Suffix field: noblock
2. Background images
RGB file sized to 2000px X 515px at 72dpi in Photoshop; Saved for Web: Progressive JPG 50% quality; and run through ImageOptim.
FTP upload to server: root/images/HeaderImages – OR – upload them via Joomla Media Management.
3. Custom CSS file
Each background image will be assigned to its respective page via the Page Class tag.
Page Class tag: Since the name of the Menu Item is Awards Event – and the alias of the page is awards-event – we add the awards-event class to the body tag in the CSS file as follows: body.awards-event.
Image path: include the URL path to the background image.
And we end up with:
body.awards-event #rt-showcase {
background-image: url(/images/HeaderImages/bg-awards.jpg);
background-position: center center;
}
The custom CSS file (rt_ximenia_responsive-custom.css) is then FTP uploaded to: /root/templates/rt_ximenia_responsive/css/rt_ximenia_responsive-custom.css
4. Menu Item:
- Menu Title: Awards Event
- Alias: awards-event
- Details tab: Template Style drop-down: Ximenia – Default
- Page Display tab: Page Class field: awards-event
