Joomla! Forum - community, help and support

Posted: **Fri Aug 08, 2008 9:50 pm**

I'm quite new to this particular wonderland, and I am sure this will qualify as a dumb question, but I was wondering...
Is there a way to create a background image in an article?

[mod edit: added solved to subject]

Posted: **Sat Aug 09, 2008 8:49 am**

Do you want to add it to just one article or do you want to add to all articles?

In case you want to add it to all articles, you can use a css style sheet to add a background-image to each article.

Olaf

Posted: **Sat Aug 09, 2008 1:16 pm**

Hi. If you want to change the background image for one menu item, you can use the Page Class Suffix. This changes the class for elements on a given page, so it allows you to edit the CSS and only have it affect the desired menu items. Here is a link with a little more info on this: http://forum.joomla.org/viewtopic.php?f=428&t=309178 Hope this helps. Mark

Posted: **Sat Aug 09, 2008 3:45 pm**

I was looking to only create a background image for a single article. OR, if possible, different background images for different articles.

Posted: **Sat Aug 09, 2008 5:19 pm**

It can be done easily for an article layout. Just use page class suffix as in my previous post. But for a blog layout (front page, category, section), it will be a little tricky, since there is no page class suffix parameter on a per article basis.

If you can write PHP code, you could do this with a template override. You could use an unused parameter (like key reference, which you probably wouldn't use for anything else) and make it work like a page class suffix (that is, modify the PHP code to add the key reference parameter to the end of the class for the content item). That would get you different style classes for different articles and it would be easy to enter when writing the article. Then you would modify the CSS to style these classes with different background images. You can read about template overrides here: http://docs.joomla.org/How_to_override_ ... omla!_core

If you don't know PHP, you could look through extensions to see if there is anything there.

Hope this helps. Mark

Posted: **Sun Aug 10, 2008 1:11 pm**

Guys, not sure if there is any limitations with this or if it causes any problems but upon first look it works!

Paste this before any content or text in your article and replace the image source accordlngly;

<div id=layer1 style="z-index:1; padding:5px; border: #FFFFFF 0px solid; background-image:url(http://coolidgeavenue.net/images/backgr ... orembg.gif); layer-background-image:url(http://coolidgeavenue.net/images/backgr ... orembg.gif);">

Works for me!!

Posted: **Sun Aug 10, 2008 5:21 pm**

Thanks for the tips Mark. I'm gonna give it a whirl tomorrow when I have a little time to play around. I'll let you know! Thanks again

Posted: **Sun Aug 10, 2008 6:20 pm**

Hi. Actually you can just use this code:

Code: Select all

<div style="background-image: url('images/stories/key.jpg')">

Also, this works for a background color:

Code: Select all

<div style="background-color: #dddddd">

It works best to use the HTML button in the editor to add or edit this. Hope this helps. Mark

Posted: **Thu Aug 14, 2008 1:55 pm**

can I use this to make the background colour of each frontpage article standout from the main background?

Currently everything is one colour and seems to be in the same class 'TD'. how do I go about seperating them if at all? I want the article to be one colour, date another and title/header another.

Posted: **Thu Aug 14, 2008 3:43 pm**

Hi. I just created a Tip & Trick article for this. Here is the link: http://docs.joomla.org/Put_a_background ... an_article. Hope this helps. Mark

Posted: **Thu Aug 14, 2008 3:49 pm**

Mark,

don't forget to add the closing tag like this one:

Code: Select all

</div>

in the last line.

Olaf

Posted: **Thu Aug 14, 2008 4:14 pm**

Hi Olaf. Good point. TinyMCE automatically adds the </div> tag when you save the file. I'll include that in the Tip article. Thanks. Mark

Posted: **Fri Aug 15, 2008 7:56 am**

can you add the div's to the title & date of an article?

Posted: **Fri Aug 15, 2008 8:03 am**

You would need to use the template overwrite to do that or follow Mark's other suggestion with the "Page Class Suffix".

Olaf

Posted: **Fri Aug 15, 2008 8:20 am**

as mentioned above they are all in the same class - title, date, content. 'Main' for everything together and 'td' for them individually. Do articles have their own template that I can work with?

Posted: **Fri Aug 15, 2008 8:24 am**

Hi,

as I said you can do that with the template overwrites:

create a folder in your template folder called "html" (if it doesn't exists)
create a folder in that html folder called "com_content" (if it doesn't exists)
create a folder in that com_content folder called "article" (if it doesn't exists)
copy the file .../components/com_content/views/article/tmpl/default.php in this .../templates/[your-template]/html/com_content/article/ folder
edit that file

Olaf

Posted: **Fri Aug 15, 2008 8:38 am**

I don't have...views/article/tmpl/default.php

Posted: **Fri Aug 15, 2008 8:49 am**

You don't have a file called:

Code: Select all

/[your-joomla-path]/components/com_content/views/article/tmpl/default.php

Well, then you would need to get that from your version of the J! 1.5.x zip file.

Olaf

Posted: **Fri Aug 15, 2008 9:01 am**

maybe coz I've realized this is for 1.5 when I'm on 1.0

Posted: **Fri Aug 15, 2008 9:06 am**

are these what I should be editing?

Code: Select all

<tr>
	<td valign="top" class="createdate">
		<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>
	</td>
</tr>

Code: Select all

<td valign="top">
<?php if (isset ($this->article->toc)) : ?>
	<?php echo $this->article->toc; ?>
<?php endif; ?>
<?php echo $this->article->text; ?>
</td>

Code: Select all

<tr>
	<?php if ($this->params->get('show_title')) : ?>
	<td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">
		<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
		<a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
			<?php echo $this->escape($this->article->title); ?></a>
		<?php else : ?>
			<?php echo $this->escape($this->article->title); ?>
		<?php endif; ?>
	</td>

Posted: **Fri Aug 15, 2008 9:36 am**

Sorry, you are in the wrong Forum, I don't have a working copy of Joomla! 1.0.x at the moment.

Olaf

Posted: **Thu Aug 28, 2008 8:58 pm**

Hi

Try this article HerdBoy Web Design - Adding a Background Image to Your Joomla Articles

Hope it was helpful

Posted: **Sun Sep 21, 2008 8:06 pm**

Hi

I tried the <div> tags but the background image only shows up in the article editor window but not on the web site. it initially was but no longer any ideas.

Posted: **Sun Sep 21, 2008 8:35 pm**

Hi again
Ok it seems to work sporadically. When I do this for an article that is accessed from the main menu it works but when i place the article on a sub menu the image doesn't show.

Any ideas why?

Posted: **Mon Sep 22, 2008 5:04 am**

Hi

Ok it seems to work sporadically. When I do this for an article that is accessed from the main menu it works but when i place the article on a sub menu the image doesn't show.

Is this for the same article ? Have you asked on the site there ?

Later

Posted: **Tue Sep 23, 2008 11:41 pm**

yes it was for the same article. i also fixed the problem i hard coded in the url.

Posted: **Thu Oct 09, 2008 10:22 pm**

dextercowley wrote:Hi. I just created a Tip & Trick article for this. Here is the link: http://docs.joomla.org/Put_a_background ... an_article. Hope this helps. Mark

This helped out quite a bit. Thanks Mark.

Posted: **Sun Sep 06, 2009 3:30 am**

Mark, I have tried using your code for adding a background image to an article. It worked fine except for one problem - Even though I resized the image I am using to exactly the size I wanted
650x829 - when I published the article, it was chopped off vertically, with a large white margin
on the right between the article and the menus. The whole body of text published, but not all of the background image. I tried making the text go all the way to the right hand border as a test, which helped somewhat, but still did not fill the whole space over to the menus.

When I preview the article, I notice that it has added another thin strip of the background image on the right which seems to be the problem. I don't know enough about codes to fix this, but assume that there is something that I'm not doing right.

Any ideas?

Posted: **Sun Sep 06, 2009 4:06 am**

Hi. Can you please paste the html code for the article when you view source? Thanks. Mark

Posted: **Sun Sep 06, 2009 5:34 pm**

Hi Mark - here it is

<div style="background-image: url('images/stories/home2.jpg')">
<div style="text-align: center;"><span style="font-size: 14pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"><br />A Place to Stop<br /></span></span></div>
<div style="text-align: center;"><span style="font-size: 14pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;">A Place to Be</span></span></div>
<div style="text-align: center;"><span style="color: #ffffff;"><br /></span></div>
<div style="text-align: left; padding-left: 150px;"><span style="font-size: 8pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"><br /> Stillpoint is located in the Santa Cruz mountains of<br />California above Monterey Bay. It is a Zen community<br />that has formed around the Enlighten Master Umi,<br />around whom has flowered the rhythm and practices<br />toward Awakening. Umi invites all to participate in<br />this banquet of life. Umi invites all to awaken to their<br />Buddha nature.<br /><br /> Stillpoint is a place of creativity, of delight,<br />where you can cease the habitual worries and move into<br />your true delight of who you really are. It is a place<br />to settle into your inner bliss.<br /><br /> At Stillpoint, there is an experience of peace. It<br />envelopes you when you are walking the grounds or<br />wandering through the gardens. The colors and <br />fragrance of the flowers, the sounds of the birds,<br />the silence in the air - all bring you fully to This.<br /><br /> Umi holds public gatherings, called Satsangs, on<br />Wednesday evenings and Sunday mornings (click on<br />Satsang for times).<br /><br /> Satsangs with Umi are also available on CD <br />(click on Satsang CD's).<br /><br /> Umi is available to all who are open to waking up to<br />their true nature. Everyone at Stillpoint is also<br />available to support this.<br /></span></span></div>
<div style="text-align: left; padding-left: 150px;"><br /></div>
<div style="text-align: left; padding-left: 510px;"><span style="font-size: 8pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"> A Place to Stop<br /> A Place to Be <br /></span></span></div>
<div style="text-align: left; padding-left: 150px;">
<div style="text-align: right;"><br /></div>
</div>
</div>

looking forward to your reply

Joomla! Forum - community, help and support

[SOLVED] Article Background Image?

[SOLVED] Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: Article Background Image?

Re: [SOLVED] Article Background Image?

Re: [SOLVED] Article Background Image?

Re: [SOLVED] Article Background Image?