Joomla Templates Club 406,261 posts

[yourwebpros1 Friend yourwebpros1Join date: September 2010Posts: 19Downloads:0Uploads:2 Thanks: 10]

#162108

I have searched for adding a background image to Kyanite and could not find a good match. I want to place a background image on the site…
http://coinsfromheaven.org/polishednails/ is the demo site I am working on…

Thank you for your help…

John Doyle
Your Web Pros

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#383914

Upload your bakground image in this folder http://coinsfromheaven.org/polishednails/templates/ja_kyanite_ii/images/

For Ex : the upload bg image name is bg.png

Go to this template css file http://coinsfromheaven.org/polishednails/templates/ja_kyanite_ii/css/template.css

Replace this Code


body#bd {
background: none repeat scroll 0 0 #F6F6F6;
color: #333333;
}


With


body#bd {
background: url("../images/bg.png") no-repeat left top;
color: #333333;
}


2 users say Thank You to chavan for this useful post

1. yourwebpros1
2. Phill

[yourwebpros1 Friend yourwebpros1Join date: September 2010Posts: 19Downloads:0Uploads:2 Thanks: 10]

#383926

Hi,

the code youi asked to replace was not the same as the code you asked me to replace…here is what i have now, that is not working;

body {
background: #fff;
color: #000;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}

body#bd {
background: url(“../images/bg.png”) no-repeat left top;
color: #333333;
}

body.fs1 { font-size: 10px; }
body.fs2 { font-size: 11px; }
body.fs3 { font-size: 12px; }
body.fs4 { font-size: 13px; }
body.fs5 { font-size: 14px; }
body.fs6 { font-size: 15px; }

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#383939

you have not uploaded your bakground image in this folder http://coinsfromheaven.org/polishednails/templates/ja_kyanite_ii/images/

please an image named bg.png. you will see teh background image applied on your site

[yourwebpros1 Friend yourwebpros1Join date: September 2010Posts: 19Downloads:0Uploads:2 Thanks: 10]

#384084

The file is there…
http://coinsfromheaven.org/polishednails/images/bg.png

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#384088

Put your image in templates>ja_kayanite_ii>images

Or change your path to point to the correct place


body#bd {
background: url("../../../images/bg.png") no-repeat scroll left top transparent;
color: #333333;

}

Noting the extra ../../

1 user says Thank You to Phill for this useful post

1. yourwebpros1

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#384119

In the case of this site you will have to add some code in a couple of other locations.

To template.css at line 774

change

#ja-container.ja-l1r1 {
}

to

#ja-container.ja-l1r1 {
background:url("../images/bg.jpg") no-repeat scroll left top transparent;

}


and in template.css line 1144

change

#ja-botsl {
}

to

#ja-botsl {
background:url("../images/bg.jpg") no-repeat scroll left top transparent;

}

Then in template.css line 1158

change


#ja-footer {
clear:both;

}


to

#ja-footer {
background:url("../images/bg.jpg") no-repeat scroll left top transparent;
clear:both;

}

Finally you would need to adjust the styling of the footer in template.css at line 1160 (#ja-footer .main) or change the class of the module so it does not have the transparrent background.

[Author]

Posts