How to place background images in content items

General questions relating to Joomla! 1.5 There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
abcrobots
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Mon May 07, 2007 5:26 pm

How to place background images in content items

Postby abcrobots » Sat Jul 19, 2008 10:09 pm

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.
:-[ :D :)

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: How to place background images in content items

Postby dextercowley » Sun Jul 20, 2008 2:37 am

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
Mark Dexter
"Well...how did I get here?"

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: How to place background images in content items

Postby dextercowley » Sun Jul 20, 2008 3:07 am

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
Mark Dexter
"Well...how did I get here?"

abcrobots
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Mon May 07, 2007 5:26 pm

Re: How to place background images in content items

Postby abcrobots » Tue Jul 22, 2008 1:06 am

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.

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: How to place background images in content items

Postby dextercowley » Tue Jul 22, 2008 5:26 am

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
Mark Dexter
"Well...how did I get here?"


Return to “General Questions/New to Joomla! 1.5”

Who is online

Users browsing this forum: rcarey and 10 guests