SOLVED Afterburner2 - Background Picture on Pages
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
- Is it possible to create an override on every page to display a background picture instead of colored picture?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Yes with custom CSS.
Where do you want the background exactly?
What are the images called (url) and which page do you want them on?
The menu item ID is a class on the body tag so you can use that in your CSS selectors to apply the background to a specific menu item.
If you need help, Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
That image does not seem to exist?
Use this code...
body { background-image: url("/images/gallery/miller-pizza-company-chicago-storefront.jpeg"); background-size: cover; background-attachment: fixed; } #rt-top-surround { background-color: transparent; }
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
That worked. Gallery needed to be capitliazed i think as how I have the directory named. Is there a way to make the image responsive so it always fills the screen?
Thank you
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Actually, I think I know what to do for the responsive image.
I need an override now to change font colors everywhere. Can you help? I'd like white for now.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
That's what it is doing? You can't really do better than that since the image you are using is "portrait" shaped so it's better that it's clipped - otherwise it will distort. The alternate options instead of "cover" are "100% 100%" or "contain" neither of which look as good in my opinion.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
There's no "silver bullet" to change font colors everywhere - you need to be specific and create a custom CSS statement to change precisely what you need to and no more. Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.
It's not going to do you any good anyway even if you do this in CSS because you've used hardcoded inline styling in your html to set fixed colors - you should not use inline styling in the html at all - use CSS.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Thank you. Yes, I'd natually remove any inline eventually. Sounds good.
Thanks for the help with this. This can be closed now.
-
Time to create page: 0.062 seconds