Page 1 of 1
How to place background images in content items
Posted: Sat Jul 19, 2008 10:09 pm
by abcrobots
Hi.
My apologies if this question has been answered already.
I have tried to add a background image in my content item (one page) in my 1.54 installation. I have tried to add a short .css declaration in <body> tags at the start of the page, and it looks fine in the editor, but on the live site, the bg image does not load.
I suspect that the global .css is overriding my additional .css declarations.
Can someone please explain to my dense brain how to do this?
Thanks guys.
Re: How to place background images in content items
Posted: Sun Jul 20, 2008 2:37 am
by dextercowley
Hi. I didn't know how to do it, so I did some experimenting. This is one way to do it. There may be a better or easier way.
1. In the menu item(s) that you want to show the background image, set the Page Class Suffix in the Paramters (System) to something like "_mybackground".
2. Edit your template.css file (in the <joomla home>/templates/<your template>/css/" folder). Find the part of the file where "table.componentopen" is being set. Add a new section to set the table.contentpaneopen_mybackground, as follows (assuming your image is in "images" folder):
Code: Select all
table.contentpaneopen_mybackground {
background-image: url(../images/<your image>);
}
That should work. You can set as many Page Class Suffixes as you like, so you could have different backgrounds for different menu items (pages). Hope this helps. Please post back if it works. Mark
Re: How to place background images in content items
Posted: Sun Jul 20, 2008 3:07 am
by dextercowley
Hi. I forgot to add that you may need to make some other changes to your template to fix up headings. For example, in playing around with this using the rhuk_milkyway template, I found I needed to add ".contentheading_mybackgroundimage" to the "h2, .contentheading" line and ".componentheading_mybackgroundimage" to the h3, ".componentheading, table.moduletable th, legend" line.
I also needed to add ".componentheading_mybackgroundimage" to the "h3, .componentheading, table.moduletable th" section of the "blue.css" file (I'm using the default Blue color).
Without these changes, you lose the styling for the article headings. There may be some other tweaks needed, depending on the menu item type. You can use Web Developer to figure out where the styling is coming from for each heading and then fix it accordingly. You can also use "View Page Source" to see where Joomla! is putting the new class suffix.
This is actually a pretty cool feature. I was wondering how you actually used the "Page Class Suffix". I might just put some background colors on my site!
Hope this helps. Mark
Re: How to place background images in content items
Posted: Tue Jul 22, 2008 1:06 am
by abcrobots
Hi Mark-
This sounds like a really promising idea.
however, I'm using the JA_purity template, which is really cool, and I'm not sure about where I need to park that code.
Here's where I put it in- Let me know if I'm close, or if that's what you meant.
Code: Select all
table.contentpane {
border: none;
width: 100%;
}
table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}
table.contentpaneopen_washed {
background-image: url(../images/mylogo.png);
}
table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
float: right;
}
table.contenttoc a {
text-decoration: none;
As you can see, I've chosen to call this style _washed because it is a washed-out logo that I want ghosetd in the background.
However, I'm a code NUBE (apologies) but I'm learning more as time goes by. Please dumb down your explanation so that I can follow you.
Thanks for helping.
Re: How to place background images in content items
Posted: Tue Jul 22, 2008 5:26 am
by dextercowley
Hi. I'm not very familiar with the ja_purity template. It doesn't look like the styling works the same way on that one, so I'm afraid my suggestion doesn't seem to work for that template.
If you just want to put a background image behind every article, you could try inserting the following into your template.css file:
Code: Select all
div.article-content {
background-image: url(../images/<your image>);
}
But this will not give you the option to use it selectively. Hope this helps. Mark