Public Forums 71,145 posts

[kev261266 Friend kev261266Join date: November 2010Posts: 6Downloads:0Uploads:2 Thanks: 2]

#157672

Hi,

I have been struggling to find a simple way to add a background image to an article and to a “section” Have tried the following:

<div style=”background-image: url(‘images/stories/key.jpg’)”>
Taken from Joomla doc ref: http://docs.joomla.org/Put_a_background … an_article

This does not work. Also tried:

<div id=”contactdesig”>TESTTEXT </div>
in article section
and
div.contactdesig{
background-image: url(‘../images/contactdesig.jpg’);
background-repeat: no-repeat;}
In template.css

This does not work either? I have no problem using the page suffix strategy, but I still need a way to get the back grounds to appear in the first place. I am using the latest Joomla 1.5.22 and have tried using tinymce and JCE editors. but nothing works.

Can anyone help?

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#367884

Dear kev261266,
Please try to edit your above css code to:


div#contactdesig{
background-image: url('../images/contactdesig.jpg');
background-repeat: no-repeat;
}


[kev261266 Friend kev261266Join date: November 2010Posts: 6Downloads:0Uploads:2 Thanks: 2]

#368070

Hi anhhv,

I tried the edit you suggest but it did not work, the result was the image below.

I have tried the following code with no success:

<div id=”contactdesign”> </div>

div#contactdesign{
display:block;
width: 1000px;
height: 500px;
background-image: url(‘C:xampphtdocsjoomla_developmentDesignergie Fullimages/contactdesignergie.jpg’);
background-repeat: no-repeat;}

I have also tried using suffixes to add a background using the following:

table.contentpaneopen-contactdesignergie,
{background: url(../images/contactdesignergie.jpg) no repeat
}

table.contentpaneopen-contactdesignergie,
{background: url(../images/contactdesignergie.jpg) no repeat
display: block;
width: 1000px;
height: 500px;}

table.contentpaneopen-contactdesignergie, table.contentpane-contactdesignergie
{background: url(../images/contactdesignergie.jpg) no repeat
display: block;
width: 1000px;
height: 500px;}

I am using a local host and have tried adding these codes to the following css files:

C:xampphtdocsjoomla_developmentsitenametemplatesjat3blankcsstemplate.css

C:xampphtdocsjoomla_developmentsitenamepluginssystemja_t3_blankbase-themesdefault
csstemplate.css

Still nothing. Any ideas?

---

Attachments:

1. 

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#368135

Dear kev261266,
Pls check url in your code :
[PHP]div#contactdesign{
display:block;
width: 1000px;
height: 500px;
background-image: url(‘C:xampphtdocsjoomla_developmentDesignergi e Fullimages/contactdesignergie.jpg’);
background-repeat: no-repeat;}[/PHP]

Your image url is wrong….

[esecel Friend esecelJoin date: December 2010Posts: 1Downloads:0Uploads:0]

#368562

Hi everybody, i had the same problem since yesterday and today i solved it. Also you have to go in your backend and have to chose (in the template of t3 framework) “ENABLE DEVELOPMENT MODE” then it should work.
For example you want just a background image than you have to insert the code “background: url(‘../images/contactdesig.jpg’);” in your “template.css” on the position “body#bd”
good luck 😀

here is a youtube link: http://www.youtube.com/watch?v=NU2-a0lLKQ0
where you can see the same!

[kev261266 Friend kev261266Join date: November 2010Posts: 6Downloads:0Uploads:2 Thanks: 2]

#370036

<em>@esecel 210797 wrote:</em><blockquote>Hi everybody, i had the same problem since yesterday and today i solved it. Also you have to go in your backend and have to chose (in the template of t3 framework) “ENABLE DEVELOPMENT MODE” then it should work.
For example you want just a background image than you have to insert the code “background: url(‘../images/contactdesig.jpg’);” in your “template.css” on the position “body#bd”
good luck 😀

here is a youtube link: http://www.youtube.com/watch?v=NU2-a0lLKQ0
where you can see the same!</blockquote>

Hi thanks for the reply, but I am trying to put different backgrounds on specific pages. The instructions you provided will put the same template everywhere.

[kev261266 Friend kev261266Join date: November 2010Posts: 6Downloads:0Uploads:2 Thanks: 2]

#370038

Hi anhhv,

not sure what you mean? I have tried the url using the full address, shortened address, forward slashes and back slashes. Unfortunately I still cannot get any thing to work.i.e.

background-image: url(‘C:xampphtdocsjoomla_developmentDesignergie Fullimages/contactdesignergie.jpg’);
background-image: url(‘C:xampphtdocsjoomla_developmentDesignergie Fullimagescontactdesignergie.jpg’);
background-image: url(‘C:/xampphtdocs/joomla_development/Designergie Full/images/contactdesignergie.jpg’);
background-image: url(../images/contactdesignergie.jpg);

Thanks.

Kev.

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#370594

Hi kev261266,

If you want to edit directly in article you follow the instruction: http://docs.joomla.org/Put_a_background_image_or_color_on_an_article
Also, you can edit an article, click Toggle editor button to switch to HMLT mode and add your html content, then add css style to template.css file as below:

div # contactdesig {
display: block;
width: 1000px;
height: 500px;
border: solid 1px red;
background-image: url (..images/contactdesignergie.jpg);
background-repeat: no-repeat;
}
See the attachment for detail!

[Author]

Posts