HTML Logo by World Wide Web Consortium ( Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.

outer_background to no repeat

Login / Search

 [ Join | More ]
 Add topic 
#103320 (In Topic #20230)

Fan in action

Hi, I have an outerbackground image. It currently sits only at the top of the pages of my website, so rather than acting like a traditional tile, its instead a letterbox shaped jpg with a size of 2294px x 400px, and i've designed it so that the 980px in the middle of the image isn't necessary to show as the body of each page obscures it.

So as it stands the background isn't tiling in the out the box sense, it's not tiling up & down, only left to right. Now on a laptop screen, or indeed a 1080px screen at browser zoom 100% this is fine as you don't see the image repeating left or right, although it is.

looking in global.css there are lots of references to backgrounds for parts of the layout, and often they have a reference to the repeat/tiling functionality of that image, but not where i see the main outerbackground entry, only this
background: url('{$IMG;,outer_background}');

i want it not repeat left to right as well as not up and down but can't see where to input no repeat or whatever the appropriate entry would be. Please help if you can

Back to the top

Community saint

I think you just need to add:

background-repeat: no-repeat;

to that part of the global.css to get what you want. Like this:


html>body#main_website {
background-color: {$GET,fixed_width_background};
background-attachment: fixed;
background-repeat: no-repeat;
background: url('{$IMG;,outer_background}');
#main_website #main_website_inner {
width: 980px;
position: relative;
margin: 15px auto 15px auto;
border: 1px solid {$GET,fixed_width_border};
{$BETA_CSS_PROPERTY,box-shadow: 0 0 20px {$GET,standard_border};}

Just be sure you don't make the edit to the themes\default\css\global.css file or it will be probably be overwritten during ocPortal upgrades. Use the CSS editor for your theme in the Admin Zone (Admin Zone->Style->Themes). If you used the Inherit option when setting up your theme in the theme wizard, your global.css probably won't have that code in it unless you've added it there yourself. If it's not in your theme's global.css, just add the code from the code box above to your global.css and it will override the inherited code.
Back to the top
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: