Different background image for different page Header

[Panopticoncept]

Hi at all,

if in the Basic Outline of Gantry 5 I set a background image for the Header section then that image will clone in all page I create.

But if I want different background image for different page, how I can to do?

I use Gantr 5 and Helium template.

Thanks

[Grant Preston]

Create a new outline, assign it to the menu item you want a different background image on. Then go into the Style tab for that outline and click on the check box that allows you to edit the background image. Now you will change it to the one you desire for this menu item / outline.

You can then inherit each section you do wish to be the same as the Base Outline using that sections gear icon and make choice to either inherit or clone from Base Outline. You can read more of that on the Gantry website.

Another way to set backgrounds to a section without using different outlines is to create a Page Class for that menu item... Example:

Menus > Main Menu > Home > Page Display tab > Page Class and I'd type the word home in the box. Which creates the page Class for CSS as .home

Then in your Custom CSS file Joomla Root > templates > rt_helium > custom > scss > custom.css file (create scss folder and custom.css file if you haven't already) you can call and target that Page and change or add any background you like to any section of that page using CSS background-image: ; and or background-color: ; as well.

.home #g-showcase {

  background-image:url("images/backgrounds/my-image.jpg");

  background-size: cover;

  background-repeat: no-repeat;

}

So in this example above  I am first calling the page Class .home followed by the section I wish to target. In this case I am targeting the ID g-showcase with #g-showcase

So that gives you two solid options to choose from.

Best of luck...

Grant / WebTread

--
--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

---
You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-j...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Grant Preston]

And for the Header section the same applies only .your-page-class #g-header {followed by your background CSS here}

On Jun 29, 2017, at 4:41 AM, Panopticoncept <panopti...@gmail.com> wrote:

--