How do I change the body background image on different pages
-
-
- Carlos Jaramillo
- Newbie
- Posts: 1
- Thanks: 0
-
Thanks!!!
I solve my problem!
-
-
-
- AMDYAZ
- Newbie
- Posts: 2
- Thanks: 0
-
could you explain how I can add the background image for all pages of the template zephir?
help me please I'm stuck!
Écouter
Lire phonétiquement
Dictionnaire - Afficher le dictionnaire
-
-
-
- manualva
- Newbie
- Posts: 6
- Thanks: 0
-
Henning.
You're implying a simple css modification. I believe the people looking for a way to place an image in a background of a website using gantry are stuck with the same, simple problem. Gantry.
Gantry can be helpful for some (maybe for those that don't know how to write css) but for many, it's just too strict.
I've spending long hours trying to override the background on my panacea site with no avail. It's a shame a template system so beautiful and dynamic as Joomla's is corrupted by a nazi-strict system like Gantry, now I'm seeing myself obligated to inform my boss I CAN'T add a background image to the company website, which is one of the most primitive characteristics of a simple website using only html and css. It is really a shame.
There is a way to "kill" gantry but be aware, IT DOESN'T WORK ON INTERNET EXPLORER. Works in Firefox, and Safari.
Just go to the index.php located in templates/{your current template}/ index.php and place this on top of the page:
<style type="text/css">
.gantryKill {}
</style>
It's a sloppy hack I know, but maybe for some of you that are more instructed on how gantry works it could give you a clue on how to place a background image properly.
BTW guys follow the exact same steps Henning implied in his post. This time, with this hack it'll work, at least in all browsers except internet explorer.
Thanks for reading, That'll be all for today.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Please consider that the basic-gantry template is for developers.
There are many many fine gantry templates in wich you can choose backgrounds as you like it via a dropdown. But that is not needed for all designs.
Don't understand me wrong.
Lack of css skills is a limitation you have to work on yourself.
Regarding the background question using firebug and reading this
www.smashingmagazine.com/2007/07/27/css-...ngs-you-should-know/
should give you an answer.
If you are a member you can also read this ...
www.rockettheme.com/forum/index.php?f=33..._v=viewtopic#p562198
It's not about backgrounds "per se" ... but shows you how you can deal with that ...
If you have a question about adding a background in Panance just post in the right forum.
If the template is designed that way changing the background can be made by just choosing a style from a dropdown in the template-settings. Can it be easier?
If you have suggestions to improve Gantry please add that to the requests-forum or join the google-mailing-list.
nazi-strict system like GantryPlease dont't use the word nazi here ...
I'm not only writing that because I'm german ...
-
-
-
- manualva
- Newbie
- Posts: 6
- Thanks: 0
-
Hey Henning. Sorry for the word. Didn't see your Location.
I managed to add !important at
body {background-image: url(../images/water4.jpg)!important;}
It works. BUT even though I specify a page class suffix in the menu item, which is Article Layout, and place the class in the template file, I can't get it to change background image for a specific page.
The above line works, but it modifies the body throughout the whole site.
This line doesn't work:
.CarWashTemp body {background-image: url(../images/water4.jpg)!important;}
Again, sorry for the rant.
-
-
-
- manualva
- Newbie
- Posts: 6
- Thanks: 0
-
*Deleted link. Sorry folks. Corporate website not for games and stuff. Alexa can see me here.*
This code works globally:
body {background-image: url(../images/water4.jpg)!important;}
#rt-body-bg2 {background-color: #2C3C49!important; margin:0px; padding:0; margin-left:8px; width:98.4%;}
But I can't manage to use it in page class suffix.
Interestingly enough this code works fine without the !important and WITH the suffix.
.CarWashTemp .rt-article {visibility:hidden; height:0px;}
Thanks for your help! - Last Edit: 12 years 7 months ago by manualva.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I havent checked your site yet but be careful with your css syntax
body {background-image: url(../images/water4.jpg)!important;}
must be
body {background-image: url(../images/water4.jpg) !important;}
or it will cause issues in some browsers ...
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
oki
adding this to your css
body.carwashtemp #rt-body-bg2 {background-color: red;}
will turn that red only on the home page. (clear your cache)
-
Time to create page: 0.064 seconds