Joomla Templates Club 406,261 posts

[teddirez Friend teddirezJoin date: December 2005Posts: 44Downloads:6Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#127081

I was wondering if its possible to change the background image to one that i could repeat all over the bottom. I wish to keep the gradient image which i have modified slightly. If you look at http://www.officialnichole.com you will see where ive modified the gradient image and i would like the satin effect to continue all the way to the bottom.

Looking through the CSS i wasnt sure what to change and where.

Is this possible or do i need to make the gradient image the full height of the page repeating across it? I’d like to avoid this is possible for obvious loading time reasons.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#243618

If you change the height of the image to become a little bit higher you can set it to be fixed, so it dont moves when you scroll down the site if thats a solution for you.

.home-deco {
background:url(../../images/pink/body-bg.png) repeat-x scroll 0 89px;
background-attachment: fixed;
}

[teddirez Friend teddirezJoin date: December 2005Posts: 44Downloads:6Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#243620

thats a good idea, however, ultimately i’d like to go with a non fixed background if i could. I’ll keep it in mind tho tx Menalto

[teddirez Friend teddirezJoin date: December 2005Posts: 44Downloads:6Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#243923

update on this.. i have temporarily removed the modified gradient and returned it to the original for now hoping that someone has a solution. Ive also been locked out of admin, stuck in a login loop of nowhere, but thats a J! issue not a template one.. fun fun :rolleyes:

[Nam Nguyen Phi Friend Nam Nguyen PhiJoin date: September 2014Posts: 248Downloads:3Uploads:35 Thanks: 20 Thanked: 57 times in 29 posts]

#244017

To make background image repeat to bottom, pls remove repeat-x out of style of .home-deco.
Open /color/pink.css, go to line 9, change


.home-deco {
background: url(../../images/pink/body-bg.gif) repeat-x 0 25px;
}


into


.home-deco {
background: url(../../images/pink/body-bg.gif) 0 25px;
}


[teddirez Friend teddirezJoin date: December 2005Posts: 44Downloads:6Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#244080

thanks namnp129 but what i am actually wondering if is at all possible is to keep the pink gradient image as is and have a second image in the background below it. What i had originally done was changed body-bg.gif to a png file that was 89pixels wide with the pink gradient at the bottom going over the top of another image of black satin.

I wish to then continue the satin image repeating across the bottom of the page without having to turn this image into a much larger file

[Nam Nguyen Phi Friend Nam Nguyen PhiJoin date: September 2014Posts: 248Downloads:3Uploads:35 Thanks: 20 Thanked: 57 times in 29 posts]

#244148

Yes, I understand what you mean now.
To add this image for bottom of page, you must change index.php and pink.css
1. Upload your image (body-bg.png) into /templates/ja_dravity/images/pink/
2. Open /templates/ja_dravity/index.php
3. Goto line 86, replace

<div id="ja-wrapper"<?php if($tmpTools->isFrontPage()) : ?> class="home-deco"<?php endif ; ?>>
by

<div id="ja-wrapper2">
<div id="ja-wrapper"<?php if($tmpTools->isFrontPage()) : ?> class="home-deco"<?php endif ; ?>>
4. Goto line 271, replace

</div>
<!-- END: FOOTER -->

</div>
by

</div>
<!-- END: FOOTER -->
</div>
</div>
5. Open /templates/ja_dravity/css/color/pink.css
6. Add this code at end of file

#ja-wrapper2 {
padding: 0;
margin: 0;
background: url(../../images/pink/body-bg.png) repeat-x bottom left;
}
That’s all. Goodluck!

[terence Friend terenceJoin date: September 2006Posts: 87Downloads:0Uploads:4 Thanks: 11]

#244267

and if you still having login problems try the attached – its a Virtue Mart Logout fix posted by Soeren himself.

Uplaod to your server in the correct folder of course – its for Joomla 1.0.13 though – hope it helps.

---

Attachments:

1. fix.zip

[teddirez Friend teddirezJoin date: December 2005Posts: 44Downloads:6Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#244343

ok i havent implemented this yet but i think we are on the right track. where is the second image (the 89×89 satin image) being introduced? this is the one being repeated across and down from below body-bg.png

Apologies if i havent expressed what im after real well.

below is an example of how i’d like the background images to flow

____________________________
Header Image
————————————————-
body-bg.png (repeats across as it does standard)

bottom of body-bg
————————————————
begin 89x89satin :repeats —>
and down |
|
/

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#244344

Can you drop me a copy of the template with the needed images in? Ill see if i can help you out more.

[Nam Nguyen Phi Friend Nam Nguyen PhiJoin date: September 2014Posts: 248Downloads:3Uploads:35 Thanks: 20 Thanked: 57 times in 29 posts]

#244411

<em>@teddirez 47269 wrote:</em><blockquote>ok i havent implemented this yet but i think we are on the right track. where is the second image (the 89×89 satin image) being introduced? this is the one being repeated across and down from below body-bg.png

Apologies if i havent expressed what im after real well.

below is an example of how i’d like the background images to flow

____________________________
Header Image
————————————————-
body-bg.png (repeats across as it does standard)

bottom of body-bg
————————————————
begin 89x89satin :repeats —>
and down |
|
/</blockquote>

Yes, I understand what you mean, Pls do as what is commented above but change style of ja-wrapper2 as:

#ja-wrapper2 {
padding: 0;
margin: 0;
background: url(../../images/pink/body-bg.png);
}

[Author]

Posts