Joomla Templates Club 406,261 posts

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#151406

Hi,

I would like to change my site background into one single JPEG file.

May I know how to do it?

site : http://humanwebsite.com.my

Attached with what I want.

The reason I need a single JPEG file because if you look closely, the file behind is a dragon. I can’t repetition of image file, I need it in one single JPEG fil.

---

Attachments:

1. 

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345177

sfpkent;180437Hi,

I would like to change my site background into one single JPEG file.

May I know how to do it?

site : http://humanwebsite.com.my

Attached with what I want.

Biggest problem I see is allowing for the various module position and differing screen resolutions, you can change the background to red easily enough, hmm maybe best you can do is a repeating pattern on red that will cover the whole site with a oriental looking pattern?

The other approach would be to do similar to sandinine II, that is, one graphic 1980 x 2000 with top features and on on each side allowing a cover around the body and module areas rather than a complete body etc background?

There’s some ideas see what happens?

Blessings Shannon

1 user says Thank You to uniquebiz for this useful post

1. sfpkent

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#345184

<em>@uniquebiz 180539 wrote:</em><blockquote>Biggest problem I see is allowing for the various module position and differing screen resolutions, you can change the background to red easily enough, hmm maybe best you can do is a repeating pattern on red that will cover the whole site with a oriental looking pattern?

The other approach would be to do similar to sandinine II, that is, one graphic 1980 x 2000 with top features and on on each side allowing a cover around the body and module areas rather than a complete body etc background?

There’s some ideas see what happens?

Blessings Shannon</blockquote>

The background file is not only red color, there is a big dragon behind, I need it in one single JPEG rather than repeat the same red.jpg file.

I have attached the dragon file. you know what I want. 🙂

---

Attachments:

1. 

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345188

sfpkent;180550The background file is not only red color, there is a big dragon behind, I need it in one single JPEG rather than repeat the same red.jpg file.

I have attached the dragon file. you know what I want. 🙂

“Now where did I put that local Norite install, again?” 😉

I’ll play around for a while
Blessings Shannon

1 user says Thank You to uniquebiz for this useful post

1. sfpkent

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345198

sfpkent;180550The background file is not only red color, there is a big dragon behind, I need it in one single JPEG rather than repeat the same red.jpg file.

I have attached the dragon file. you know what I want. 🙂

made a new norite psd with dragon bkg sent you a PM about it
Cheers Shannon

1 user says Thank You to uniquebiz for this useful post

1. sfpkent

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#345206

Hi Shannon,

I will try here as well. Thanks for your effort. 🙂

Kent

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#345394

Problem solved

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345416

sfpkent;180812Problem solved

OK gotta ask how did you finally do it . . . please?:)
Shannon

[smitheringale Friend smitheringaleJoin date: December 2009Posts: 236Downloads:0Uploads:0 Thanks: 63 Thanked: 44 times in 18 posts]

#345428

<em>@uniquebiz 180839 wrote:</em><blockquote>OK gotta ask how did you finally do it . . . please?:)
Shannon</blockquote>

Hi,

This is what I just did with the Developer Toolbar for firefox and the default norite template.css file

I added the following code right at the top of the css file and et voila, it worked 🙂

body {
background-image: url(http://www.joomlart.com/forums/attachment.php?attachmentid=7790&d=1275130885);
background-repeat: no-repeat;
background-position: top center;
background-color: #850100;
color: #c5c5c5;
font-family: “Lucida Grande”, Arial, Helvetica, sans-serif;
line-height: 1.6;

}

1 user says Thank You to smitheringale for this useful post

1. sfpkent

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345435

smitheringale;180854Hi,

This is what I just did with the Developer Toolbar for firefox and the default norite template.css file

I added the following code right at the top of the css file and et voila, it worked 🙂

body {
background-image: url(http://www.joomlart.com/forums/attachment.php?attachmentid=7790&d=1275130885);
background-repeat: no-repeat;
background-position: top center;
background-color: #850100;
color: #c5c5c5;
font-family: “Lucida Grande”, Arial, Helvetica, sans-serif;
line-height: 1.6;

}

Cheers, I was approaching it from a totally different aspect, in that I wanted to generate sliced images replacing the default bkg within the original source file.

Guess this highlights my lack of css knowledge generally :((
Thanks for sharing
Shannon

1 user says Thank You to uniquebiz for this useful post

1. sfpkent

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#345515

This is my way,

First of all, go to the color css file, e.g dark-red.css

Comment out:

/*
body { background: #933; color: #fefefe; }

body#bd { background: #933; color: #fefefe; }
*/

Add:

body { background: url(../../images/dark-red/dragon.jpg); background-repeat: no-repeat; background-size: 100%;}
body#bd {background: url(../../images/dark-red/dragon.jpg); background-repeat: no-repeat; background-size: 100%;}

Then, comment out again for dark-red.css:

#ja-container {
/*background-image: url(../../images/dark-red/container-bg.gif);*/
}

#ja-header {
/*background-image: url(../../images/dark-red/header-subpage-bg.gif);*/
}

.ja-home #ja-header {
/*background-image: url(../../images/dark-red/header-bg.gif);*/
}

Then go to template.css:

#ja-container {
/*background: url(../images/container-bg.gif) repeat-x bottom left;*/
margin: 30px 0 0;
padding-bottom: 2px;
position: relative;
z-index: 5;
}

#ja-header {
/*background: url(../images/header-subpage-bg.gif) repeat-x top left;*/
line-height: normal;
position: relative;
z-index: 10;
}

#ja-footer {
/*background: #7D0000;*/
color: #fff;
padding-bottom: 20px;
}

.ja-home #ja-header {
/*background: url(../images/header-bg.gif) repeat-x top left;*/
}

Since I am not css expert, it took me 2 days to figure out this, even I have marked “CRITICAL” when I submt ticket to get support from JA Team, until now, I haven’t get any response yet.

Anyway, Shannon, you are very help! 🙂

God bless!
Kent

[Author]

Posts