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.


[RESOLVED] - 9.x.x - ocPortal & CSS3 multiple backgrounds

Login / Search

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

Community saint

This is a display of pure ignorance of how CSS3 is coded in ocPortal, so I would appreciate a pointer in the right direction.

Scenario: I am trying to use the CSS3 multi-background feature for the '#main_website' so that I can display two or more bg images, layered, as the site's page background.

This works fine:

      background-image: url({$BASE_URL}/themes/aip9/images_custom/page_gl_stitch.png
), url({$BASE_URL}/themes/aip9/images_custom/bg_texture.jpg);
      background-position: left top, top left;
      background-repeat: no-repeat, repeat;

… but I wanted to 'streamline' the CSS properties to fall into line with the ocP global.css.

Changed it to:
      background-image: url('{$IMG;,page_gl_stitch}')left top, no-repeat, url('{$IMG;,bg_texture}') top left, repeat;

… but only the second IMG call gets rendered, and I don't even know if the 'position' and 'repeat' properties are being called, although I suspect the second set are actually being rendered. I am obviously overlooking a colon or semi-colon, but I can't actually see where and how!

Can some kind soul help out and throw some light on the matter, please?

 :'(


Last edit: by Fletch

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:
#90862
Avatar

I can see a missing space before "left"

EDIT: Technically, I cannot see it ;).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90863
Avatar

Community saint

HAH!

I slapped my head like a Rock Ape1, inserted the missing space - but it didn't work.

Bummer!

Does the rest of the syntax look kosher?


1 Members of the RAF Regiment are referred to affectionately as 'Rock Apes', ostensibly in reference to their WWII exploit of scaling the north face and taking control of the Rock of Gibraltar. That's the accepted version. The less charitable one is that when they ask a question, and you provide them with the answer, they always slap their forehead hard and say, "I should have known that!"

 :o

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:
#90864
Avatar

Try background-image: url('{$IMG;,page_gl_stitch}') left top no-repeat, url('{$IMG;,bg_texture}') top left repeat;

I've never tried this myself, but I checked an example and it makes some sense that commas separate the "image blocks".


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90865
O

Non-joined user

Chris Graham said

I can see a missing space before "left"

EDIT: Technically, I cannot see it ;).

When a tree falls in the forest and no one is around to hear it….

Seriously, trying to work out of you can or cannot see a space is going to keep my brain awake all night.
Back to the top
 
Posted
Rating:
#90866
Avatar

Perhaps, but you definitely can't see a space that isn't even there :lol:.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90867
O

Non-joined user

Ah, touché.
Back to the top
 
Posted
Item has a rating of 5 (Liked by JeanLiked by Chris GrahamLiked by sholzy)  
Rating:
#90874
Avatar

Community saint

Chris Graham said

Try background-image: url('{$IMG;,page_gl_stitch}') left top no-repeat, url('{$IMG;,bg_texture}') top left repeat;
Hmmmmmmm…

I dropped the commas within the image blocks. It didn't break anything, but it didn't work, either!

I took your (implied) advice and did some more on-line research, and came up with the following. It actually works and fits into the 'neat' ocPortal CSS.

      background: url('{$IMG;,page_gl_stitch}') left top no-repeat fixed, url('{$IMG;,bg_texture}') top left repeat, #DFDFE1;


The changes have been colour-coded in the box above for ease of reference. The important changes to the previous attempt(s) are:
  • commas removed from the "image blocks"
  • 'background-image' has been changed to background
  • a background colour has been added to the property - BUT - it MUST be the last thing declared, not the first call as is traditional
  • an extra attribute 'fixed' has been added to the properties of the first image block. This is to stop the graphic from scrolling up the page
  • much to my astonishment it works in Chrome, FF and IE9. Haven't tested in Opera (last update hijacked  my browsers - dumped it) or Safari (no apple crumbs near my PC)

Hope this helps somebody who wants to attempt more complex themeing displays. The only 'extras' I need to add are the vendor prefixes, something that may be easy enough after I've tested the 'magical' ocPortal $BETA_CSS_PROPERTY attribute.

I think this can be closed, but I now wish I'd started the thread in the Themeing section.

 :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
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: