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

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

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


Can i lock the background image from scrolling?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#96432 (In Topic #19148)
Avatar

Fan in action

is there a way to lock the background image used for the outer-background theme image from scrolling, so that only the website scrolls?
Back to the top
 
Posted
Item has a rating of 5 (Liked by thelocalmc)  
Rating:
#96443
Avatar

Community saint

Yes.

Do something like this:

Code

background: url('{$IMG;,page_gl_stitch}') left top no-repeat fixed;
(substitute your image for the one I've used as an example)

That will pin your background and allow only your page to scroll …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#96444
Avatar

Fan in action

awesome fletch, but where do I change that code? is it a CSS?
Back to the top
 
Posted
Rating:
#96446
Avatar

Community saint

Yes, global.css for your custom_theme.

Look for:
=========================
======Global Layout======
=========================
*/

/* Consider .website_body as 'body': it is just we cannot put our styles directly on body because sometimes this gets used in things we should not mess with such as the WYSIWYG editors frame (which is #htmlarea) and e-mails */
body.website_body {
   padding: 0 !important;
   margin: 0;
   color: {$GET,slightly_seeded_text};
   background: {$GET,main_background};
}
body.website_body.frame {
   background: transparent; /* Don't assume too much for a frame, it may be nested inside a box for example */
}

{+START,IF,{$CONFIG_OPTION,fixed_width}}{+START,IF,{$NOT,{$M
OBILE}}}
   html>body#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
      background-color: {$GET,fixed_width_background};
      background-attachment: fixed;

      /* Want to change the tiled background?
         Try this Google search to get image ideas tile background - Google Search
         Find how to edit the referenced "outer_background" theme image by doing an Admin Zone search for "outer_background"
      */
      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};}
   }
{+END}{+END}

and then edit the bits that apply.

A good tool to use is the ocPortal 'Contextual editor' that you can find in the footer - OR - use your browser's 'dev tool'. Identify the CSS element you need to change, and then see what the result is before you finalise the edit.

I've selected:
=========================
======Global Layout======
=========================
as your starting point because it is easy to find. The example I've shown is from the 'default' theme. Yours might differ slightly …!!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#96482
Avatar

Fan in action

Awesome Fletch. Thank you so much :)
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: