Joomla Templates Club 406,261 posts

[troy Friend troyJoin date: September 2008Posts: 56Downloads:0Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#151215

I would like to add a background image in the content area that will fill the browsers width… ideally, i’d like the central area left white while adding left and right borders per se… i tried adding:

background:url(../images/link-to-background.gif) repeat-y center;

to the template.css… however this did not work…

any ideas?

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#344183

What are the parameters of your template? Are you using an expanding or static width?

John.

[troy Friend troyJoin date: September 2008Posts: 56Downloads:0Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#344274

it’s set to use a static width of 1050px … though the JA Seleni template, by default, has an expanding header and footer bar… which is fine… it’s the inner area I wish to apply the backround image

[troy Friend troyJoin date: September 2008Posts: 56Downloads:0Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#344370

ja-wrapper seems to be the desired location to apply the background image… however… it does not seem to except the background image… oddly enough I can set a background color:


/* MAIN LAYOUT DIVS */

.wrap {}
.main {}
.ja-box {padding-bottom:10px;padding-top:10px;}
#ja-wrapper {background:#ACACAC !important;}
#ja-container {/*background: #fff;---*/position:relative;z-index:5;}
#ja-container .main {padding:10px 0 0;min-height:300px;}


any ideas?

and yes… as jbrett pointed out… most, if not all, of the module boxes do not have a background variable set… therefore you can see through the module/menu item to the background.

… i do not think this will be a problem for me as I created a bar 2200px wide by 1px high bar with a 1050px white area in the middle… when set to repeat-y center

[troy Friend troyJoin date: September 2008Posts: 56Downloads:0Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#344372

ok… I feel retarded… the background never showed up because the image file name was spelled wrong… it works great when it’s spelled correctly… fyi… i placed the code in the #ja-wrapper:


/* MAIN LAYOUT DIVS */

.wrap {}
.main {}
.ja-box {padding-bottom:10px;padding-top:10px;}
#ja-wrapper {background:url(../images/my-awesome-bkgd.jpg) repeat-y center !important;}
#ja-container {position:relative;z-index:5;}
#ja-container .main {padding:10px 0 0;min-height:300px;}

I tried #ja-container… however… it did not encompass user areas 6-9… #ja-wrapper got them all

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#344605

Dear Troy,

I think you should do as follow:


#ja-wrapper {background: url(../images/my-awesome-bkgd.jpg) repeat-y center !important;}
#ja-container { background: none;}


[Author]

Posts