Page background image

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Page background image

Post by Barrowboy »

Is there anyway to have a background image within an individual page that sits behind the text.
We are using version 2.2.15 and TinyMce to edit the pages.

Thanks for any help.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Page background image

Post by DIGI3 »

Unless your developer set up an option to choose a background image per page in the content editor, it will likely require some changes to the code. TInyMCE can't really change anything outside of the specific block you're editing.

One option is to give every page a unique CSS class or ID, which could be achieved by editing the page template so the opening body tag looks something like

Code: Select all

< body id="{$page_alias}" >
Then in your CSS file you can add a different background image per page with something like:

Code: Select all

body {
  background-size: cover
}
#home {
  background-image: url([[uploads_url]]/images/foo.jpg);
}
#about-us {
  background-image: url([[uploads_url]]/images/bar.jpg);
}
substituting the examples for your actual aliases and images, and styling as needed.

Your developer could set up more advanced options by adding an image picker to the page template so you, the editor, can upload and/or browse to an image right in the page editor without editing code.
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Page background image

Post by Barrowboy »

Hi Digi

Thanks for your reply it does work using the CSS but not quite what I was looking for, putting the $page alias in the body puts the image all over, I just wanted it to be in the content area.

I have tried adding the $page alias in the content block but the site then crashes.

Could you suggest an amendment.

As for a developer I am afraid that is me I have been doing websites for over twenty years but using just html, php and css etc. it is only in the last couple of years I have used CMSMS and still learning.

Is there an example of the image picker I could use?

Thanks again.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Page background image

Post by DIGI3 »

Take a look in the help file under content_image, it should give you an idea how to add an image picker to a page. There are also third-party modules such as JMFilePicker and ECB2 which offer other options.

{$page_alias} is just the variable the alias of the page is stored in, so you can use it anywhere. If you want it as an ID wrapped around your content block you can just do something like <div id="{$page_alias}">{content}</div> - or whatever the equivalent is for your site. If the site crashes then a mistake was made somewhere, the error log would give more details if no error message was displayed on the screen.
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Page background image

Post by Barrowboy »

Hi Digi

I have used the your idea off rapping the $content in a div with the page alias. This work fine for me at the moment and gives us a bit more control on individual pages.

Thanks
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Page background image

Post by Rolf »

- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Post Reply

Return to “Tips and Tricks”