Back Ground Image

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Back Ground Image

Post by Barrowboy »

Hi
Can anyone explain how I can show an image in the background of the page but not in admin when editing.

My CSS at the moment is:

body {
background-image:url(https://www.mysite/uploads/images/body-bg.jpg);
background-repeat:repeat;
}

The problem is the image shows when editing a page which makes it difficult to add text etc. I would like to remove it from admin.

Thanks
User avatar
paulbaker
Dev Team Member
Dev Team Member
Posts: 1465
Joined: Sat Apr 18, 2009 10:09 pm
Location: Maidenhead, UK
Contact:

Re: Back Ground Image

Post by paulbaker »

One way: If you use TinyMCE (find out at My Preferences > My Account > User Preferences > Select WYSIWYG to use).

Then: Extensions > TinyMCE WYSIWYG editor and have a look around there (can't find an installation with TinyMCE at the moment to give you further details). Pretty sure there is an option to add specific CSS.
To copy System Information to the forum:
https://docs.cmsmadesimple.org/troubles ... nformation

CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Hi
Yes there is an option to add CSS in Tinymce which we are already using, but these only affect the content page you are edit at the time.


I am trying to remove/hide a background image from Tinymce admin which shows in the editor while editing a page which prevents from seeing the text.

Thanks
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Back Ground Image

Post by velden »

The options Paul mentions should be what you're looking for.

Another approach could be to use the browser's inspector to find a specific class for the editor. (could be something like .tinymce) and override the background in your css

e.g.
.tinymce body {background: none;}
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Hi
I have now got back to looking into the issue.

While building the site we just temp removed the BG image but now we have other editors using the site we like to find an answer to the problem.

I believe there must be someway.

We have added this bit of code to the css file.

/* TinyMCE specific rules */
body.mceContentBody { background: #fff; color:#000; }

We have also tried adding this to css background: none !important;

But this seems to have no affect could something be missing?

Thanks for any further ideas.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Back Ground Image

Post by Dr.CSS »

Try using the some code to add the image to take it away...

background-image bla bla bla {none}
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Thanks for your suggestion but unable to make it work.

We now have this in the css.

/* TinyMCE specific rules */

body.mceContentBody {
background-image: none !important;
background: #fff; color:#000; }

Is the call correct body.mceContentBody could that be wrong??

Thanks
User avatar
PinkElephant
Forum Members
Forum Members
Posts: 169
Joined: Fri Feb 06, 2009 2:08 pm

Re: Back Ground Image

Post by PinkElephant »

Dusting off an old test site and installing TinyMCE... it looks like the editor content is sandboxed in an iframe where the child body can inherit the parent styles (optionally from the CMSMS design) but to override them you need to insert them *within* the child. TinyMCE seems to offer a number of ways of doing that (see Configure the appearance of content inside TinyMCE's editable area). I think the easiest way in this case is to go via javascript...

Extensions > TinyMCE > [profile] > Templates | Extra JavaScript options for the init script

Adding content_style...

Code: Select all

paste_as_text: true,
image_caption: true,
content_style: 'body {background-color:yellow;}'
... does the trick here but you may need to CTRL-F5 to see the change.
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Thanks for your suggestion but unfortunatly it still the same.

I have added one more line to your suggestion.

paste_as_text: true,
image_caption: true,
content_style: 'body {background-image:none;}',
content_style: 'body {background-color:yellow;}'

But still unable to hide the image or get a yellow background.

Cleared the cache and rebooted the system each time but no luck.

I will keep trying but if you have any other ideas I would appreciate it.

Thanks
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Hi again
Just notice that I now have a yellow background on my dropdown css selections.
So its possible the content_style that is wrong.

Thanks
User avatar
PinkElephant
Forum Members
Forum Members
Posts: 169
Joined: Fri Feb 06, 2009 2:08 pm

Re: Back Ground Image

Post by PinkElephant »

Barrowboy wrote: Wed Jul 07, 2021 4:22 pmJust notice that I now have a yellow background
Perhaps you didn't refresh the browser -- or a server clear-cache was needed.

It seems to work here...

... adding this to the design's main stylesheet

Code: Select all

body {
  background: url([[root_url]]/uploads/images/logo1.gif) repeat;
}
... makes editing content quite tricky ;)

Updating the default TinyMCE profile with ...

Code: Select all

content_style: 'body {background-color:yellow;background-image:none;}'
... yellow remains and the image disappears (but I did clear the cache and refresh the browser a couple of times).
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Hi Again

Got it Hooray, Hooray.

Change the setting to you last recommendation and yellow to white.

Cleared cache in maintenace, browser, and the server now works. Didn't do server last time.

That's a load of my mind.

Thanks for all your help I hope this helps anyone else with the same issue.

Regards.
User avatar
PinkElephant
Forum Members
Forum Members
Posts: 169
Joined: Fri Feb 06, 2009 2:08 pm

Re: Back Ground Image

Post by PinkElephant »

Cool :)

By the way, I only used background-color as an example (and an easy-to-see change in the TinyMCE's handy preview), you can probably run with just one property override...

Code: Select all

content_style: 'body {background-image:none;}'
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Back Ground Image

Post by Barrowboy »

Hi
Thanks but I had already done that.

It's nice to have a colour sometimes so you can follow what's going on.

My uses can now see and edit content.
Post Reply

Return to “Layout and Design (CSS & HTML)”