Joomla Templates Club 406,261 posts

[Paul Wallen Friend Paul WallenJoin date: September 2014Posts: 140Downloads:0Uploads:13 Thanks: 35 Thanked: 5 times in 1 posts]

#136921

For this template, is it possible to have a wider background image and not break the template?
On a 24″ monitor, the background image repeats and looks bad.
Is there code to make the image not repeat? or can I just stick a larger image in there?

[anisjolly Friend anisjollyJoin date: April 2008Posts: 661Downloads:0Uploads:15 Thanks: 33 Thanked: 96 times in 55 posts]

#285642

you should be able to just edit the bg image yourself in photoshop and make it wider.

Once you’ve done that – upload it (and if need be change the relevant css code) and you should be fine.

1 user says Thank You to anisjolly for this useful post

1. Paul Wallen

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#285644

It is also possible to change the code so that the image wont repeat itself. Make the borders of your background blend in with the global background colour and that should also look ok.

Now when someone has a even bigger screen you will have the same problem.

1 user says Thank You to bennitos for this useful post

1. Paul Wallen

[Paul Wallen Friend Paul WallenJoin date: September 2014Posts: 140Downloads:0Uploads:13 Thanks: 35 Thanked: 5 times in 1 posts]

#285769

Could anyone provide the code for me to change the background to not repeat?

I’m not that good with css.

[sunrise Friend sunriseJoin date: February 2007Posts: 920Downloads:0Uploads:5 Thanks: 103 Thanked: 166 times in 114 posts]

#285770

Depending on the picture you want, you could also make it a gradient at the sides going to white or whatever color you want, and make that wide as you wish wihout making the file size that much bigger. Adding an inch or two of plain color on either side won’t make too much of a difference on the file size I think. Size does matter you know. :D:D

1 user says Thank You to sunrise for this useful post

1. Paul Wallen

[supersplet Friend superspletJoin date: February 2009Posts: 37Downloads:0Uploads:7 Thanks: 5 Thanked: 2 times in 1 posts]

#297282

If you want to make backgorund no-repeat, open template.css

and change
body#bd {
color: #CCCCCC;
background-color: #333333;
background-attachment: fixed;
background-position: center top;
}

to
body#bd {
color: #CCCCCC;
background-color: #333333;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
}

I used this and it’s much better. I also added fade out to the background picture on left, right and bottom.

[Author]

Posts