[SOLVED] Article Background Image?

[Rhombi313]

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]

[ooffick]

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

[dextercowley]

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

[Rhombi313]

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

[dextercowley]

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

[smooth-c]

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!!

[Rhombi313]

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

[dextercowley]

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

[debragrant]

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.

[dextercowley]

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

[ooffick]

Mark,

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

Code: Select all

</div>

in the last line.

Olaf

[dextercowley]

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

[debragrant]

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

[ooffick]

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

Olaf

[debragrant]

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?

[ooffick]

Hi,

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

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

Olaf

[debragrant]

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

[ooffick]

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

[debragrant]

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

[debragrant]

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>

[ooffick]

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

Olaf

[mustaq-ahmed]

Hi

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

Hope it was helpful

[bak1]

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.

[bak1]

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?

[mustaq-ahmed]

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

[bak1]

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

[Rhombi313]

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.

[Amito]

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?

[dextercowley]

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

[Amito]

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