Background image specified in Body tag
Background image specified in Body tag
Hi!
This is my first question to the forum. I want to add a background image to all topics in my project, to appear in non-print targets only (the content is all single-sourced). I want the topic content to appear *in front* of the image. Using the <body> tag to set the image seems to produce unexpected results - the image does not appear in the WebHelp target, but does show up (without the Master Page positioning applied) in the XML editor view and in the Preview!
Just to clarify, I'd like the background image to fill the whole window that displays the topic content in the WebHelp output. So, I'd like to have a banner and a background all contained within one image file, and then have the content appear in front of that image.
Has anyone seen this before?
Thanks!
Karen
This is my first question to the forum. I want to add a background image to all topics in my project, to appear in non-print targets only (the content is all single-sourced). I want the topic content to appear *in front* of the image. Using the <body> tag to set the image seems to produce unexpected results - the image does not appear in the WebHelp target, but does show up (without the Master Page positioning applied) in the XML editor view and in the Preview!
Just to clarify, I'd like the background image to fill the whole window that displays the topic content in the WebHelp output. So, I'd like to have a banner and a background all contained within one image file, and then have the content appear in front of that image.
Has anyone seen this before?
Thanks!
Karen
-
- Propellus Maximus
- Posts: 1985
- Joined: Tue Jan 23, 2007 8:18 am
- Location: Darn, I knew I was around here somewhere...
Re: Background image specified in Body tag
Where are you adding the image? In the <body> tag of the stylesheet, or in the master page? I would use the master page in this case.
Until next time....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare
Re: Background image specified in Body tag
Thank you Kevin! I was adding it to the body tag of the style sheet. Are you suggesting that I add it to the body tag of the master page, or just as an image inserted into the master page?
Thanks again
Karen
Thanks again
Karen
-
- Sr. Propeller Head
- Posts: 110
- Joined: Tue Feb 26, 2008 12:17 pm
- Location: Home: NH --- Compensated Servitude: MA
- Contact:
Re: Background image specified in Body tag
We do something similar but only with a banner. We use no-repeat so that the banner does not tile.
There are some display problems in the XML editor, but it seems to work fine in the output (mostly chms but one webhelp system uses it).
It is applied to the body tag in the stylesheet. We do not use a master page, so I can't say anything about how that affects background image displays.
What I think you need to do is to use a stylesheet medium and make sure it is used for your webhelp target (Advanced tab of target, stylesheet medium field). It did not show in the output when I used a default medium.
I did a quick test with a banner & picture combined and it worked. Here is the style sheet code. Here is a snap of the output: Note that if you resize the window, you can see white at the edges. The picture does not expand to fit.
But if you have a bland background that looks ok if repeated, you could use repeat rather than no-repeat so that you get a boackground that expands to fit long topics.
There are some display problems in the XML editor, but it seems to work fine in the output (mostly chms but one webhelp system uses it).
It is applied to the body tag in the stylesheet. We do not use a master page, so I can't say anything about how that affects background image displays.
What I think you need to do is to use a stylesheet medium and make sure it is used for your webhelp target (Advanced tab of target, stylesheet medium field). It did not show in the output when I used a default medium.
I did a quick test with a banner & picture combined and it worked. Here is the style sheet code. Here is a snap of the output: Note that if you resize the window, you can see white at the edges. The picture does not expand to fit.
But if you have a bland background that looks ok if repeated, you could use repeat rather than no-repeat so that you get a boackground that expands to fit long topics.
You do not have the required permissions to view the files attached to this post.
Re: Background image specified in Body tag
Thanks, this is working! I don't know why it didn't before, perhaps it was the 'attachment' setting that helped.
The only problem now is that the image repeats when I drag the window sideways...
Regards
Karen
The only problem now is that the image repeats when I drag the window sideways...
Regards
Karen
-
- Sr. Propeller Head
- Posts: 110
- Joined: Tue Feb 26, 2008 12:17 pm
- Location: Home: NH --- Compensated Servitude: MA
- Contact:
Re: Background image specified in Body tag
If you set background-repeat to repeat-y the graphic will repeat top to bottom (long) but not side-to-side (wide).
Re: Background image specified in Body tag
Great, is there a way to have it not repeat at all?
Re: Background image specified in Body tag
Actually, it looks as though I might need a repeatable background in conjunction with a Master page on which I will position a logo in the footer.
Is there a way to specify the width of the body proxy on the Master page as well as a fixed, bottom-right position for the logo?
Any help is greatly appreciated!
Karen
Is there a way to specify the width of the body proxy on the Master page as well as a fixed, bottom-right position for the logo?
Any help is greatly appreciated!
Karen
-
- Sr. Propeller Head
- Posts: 110
- Joined: Tue Feb 26, 2008 12:17 pm
- Location: Home: NH --- Compensated Servitude: MA
- Contact:
Re: Background image specified in Body tag
set it to no-repeat.kcann wrote:Great, is there a way to have it not repeat at all?
But then it is a fixed size, and if your topic is longer or wider it looks crappy.
If you think about it, the use of images for background in a web page is similarly limited.
Most web pages with a background graphic do repeat length-wise, and width-wise the designers make the graphic wide enough so that sane people won't widen the browser enough to show white edges.
You might think about using a non-graphic color background with just a banner. The background color will seamlessly repeat long and wide.
Re: Background image specified in Body tag
After the bodyProxy in the masterpage, insert a table or use a DIV to position the logo image. Since it's after the bodyProxy, it will always appear at the bottom of the page after the content. So how far it actually appears down the page depends on how much content you have in the topic.kcann wrote:Is there a way to specify the width of the body proxy on the Master page as well as a fixed, bottom-right position for the logo?
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Background image specified in Body tag
Sorry to butt in but I have similar issues with body classes. I have two body classes, each of them using a different image right-aligned and not repeated. The images appear in the XML editor in the relevant topics but not in the preview or in the compiled HTML files. I only produce on-line help so medium is set to default and these two classes are declared early on in the CSS.kcann wrote:Hi!
Using the <body> tag to set the image seems to produce unexpected results - the image does not appear in the WebHelp target, but does show up (without the Master Page positioning applied) in the XML editor view and in the Preview!
Karen
Here is an example of how one of these classes appears in my CSS
Code: Select all
body.A
{
background-position: right top;
background-repeat: No-Repeat;
background-image: url('../ImageLibrary/Corporate Look/A.png');
}
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Re: Background image specified in Body tag
In wouldn't appear in the MadCap.css file -- it would be in your main topic stylesheet. And you'd need to create two masterpages. In one, you apply the body.A class. In the other, you apply the body.B class. You'd also need to declare two HTML classes (or the main <html> style and one class for it). You set one <html> style to use one masterpage and use the html class to use the second masterpage. Then in each topic, you apply the appropriate HTML class, which will load the appropriate masterpage, which will call the appropriate body style. For more details, see this KB article on using multiple masterpages in Flare --> http://kb.madcapsoftware.com/default_CSH.htm#FMP1001F.MC Hammer wrote:The PNGs exist and are in the correct path (as per line above). body.A (or body.B) is nowhere to be seen in MadCap.css...
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Background image specified in Body tag
Hi Lisa
Thank you for your input, I will try your solution, but I do not understand why I would need to use masterpages in this particular case. My topics all use the same master page but their body class differs, depending if the class is body.A or body.B. Theoretically, this should work, shouldn't it?
Thank you for your input, I will try your solution, but I do not understand why I would need to use masterpages in this particular case. My topics all use the same master page but their body class differs, depending if the class is body.A or body.B. Theoretically, this should work, shouldn't it?
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Background image specified in Body tag
I did this recently in a project. (The project is incomplete so the screen shots show incomplete content.)
Here are two examples of how it looked in the project:
Wide view: Narrow view: I chose to make this change in the master page, because (a) I didn't want to see it in the XML Editor and (b) it was an easy way to ensure it would only affect online output.
Essentially what I did was apply a class to the body style in the master page. In that style I set the image and told it to stay in the bottom right corner and to not repeat. My image gradually fades to white, so if the topic is long or the window is wide, it just works and gradually appears as you reach the end of the topic.
Then I created a DIV with a border and transparency (this one is set to 90%, I believe) and added that to the master page and put all my content inside the div.
Now when I edit in the XML editor, I don't get distracted by the background (especially because the background doesn't tend to appear properly in the XML editor), but when I create my output, the background just works.
Here are two examples of how it looked in the project:
Wide view: Narrow view: I chose to make this change in the master page, because (a) I didn't want to see it in the XML Editor and (b) it was an easy way to ensure it would only affect online output.
Essentially what I did was apply a class to the body style in the master page. In that style I set the image and told it to stay in the bottom right corner and to not repeat. My image gradually fades to white, so if the topic is long or the window is wide, it just works and gradually appears as you reach the end of the topic.
Then I created a DIV with a border and transparency (this one is set to 90%, I believe) and added that to the master page and put all my content inside the div.
Now when I edit in the XML editor, I don't get distracted by the background (especially because the background doesn't tend to appear properly in the XML editor), but when I create my output, the background just works.
You do not have the required permissions to view the files attached to this post.
Re: Background image specified in Body tag
If you're not using masterpages at all, then yes, just putting it on the body tag should work.MC Hammer wrote:... but I do not understand why I would need to use masterpages in this particular case. My topics all use the same master page but their body class differs, depending if the class is body.A or body.B. Theoretically, this should work, shouldn't it?
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Background image specified in Body tag
Hi Lisa and Paul,
Your solution works , Lisa, but I am puzzled as just using body classes definitely used to work for us in the past. Thanks for your detailed post with all the info I needed to implement this. BTW, I use master pages but was only using two up to now : one for the topics and one for the welcome page (for which I use some transparency effects very similar to yours, Paul). Paul, thanks for the very sleek screenshots (love the look and feel of your pages, especially the second one ), I have followed your advice and used my existing body classes inside the two newly created master pages.
Thanks again to both.
Your solution works , Lisa, but I am puzzled as just using body classes definitely used to work for us in the past. Thanks for your detailed post with all the info I needed to implement this. BTW, I use master pages but was only using two up to now : one for the topics and one for the welcome page (for which I use some transparency effects very similar to yours, Paul). Paul, thanks for the very sleek screenshots (love the look and feel of your pages, especially the second one ), I have followed your advice and used my existing body classes inside the two newly created master pages.
Thanks again to both.
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Re: Background image specified in Body tag
Hi everyone
My manager has provided a very cool solution that I am trying to port over to Flare. I have one background image (a gradient) and another (logo). The logo stays anchored to the right bottom of the page.
Question 1: Should I put the gradient in the <html> tag and the logo in the <body> tag?
The solution also uses frames.
Question 2: What is the Flare equivalent of frames for non-print media?
Thanks very much,
K
My manager has provided a very cool solution that I am trying to port over to Flare. I have one background image (a gradient) and another (logo). The logo stays anchored to the right bottom of the page.
Question 1: Should I put the gradient in the <html> tag and the logo in the <body> tag?
The solution also uses frames.
Question 2: What is the Flare equivalent of frames for non-print media?
Thanks very much,
K
Re: Background image specified in Body tag
I think it's been mentioned before that if you have masterpages then you have to apply body background-type styles in the masterpages, I'm guessing because the masterpages are applied last to the topic when the output is being generated, so whatever is set on the body tag of the masterpage overwrites (i.e., takes precedence over) the styles set on the body tag of a topic. If you're not using masterpages then setting the styles on the body tag of the topic stylesheet will work, but if you have masterpages then you have to apply that body class to the masterpage.MC Hammer wrote:Your solution works , Lisa, but I am puzzled as just using body classes definitely used to work for us in the past.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Background image specified in Body tag
I'm not sure that you can use a frameset inside Flare's frameset. Or did you mean it's using iframes? I think you want to avoid either option because the first you may not be able to implement at all (or not fully) and the second because iframes aren't equally supported in browsers. I recommend you create a masterpage, create a body class that has the background image attribute set to use the gradient image then apply that body class to the body tag in the masterpage. That will put the background image on every topic. For the logo, create a DIV, set its position to fixed, give it a bottom attribute (not margin-bottom, but bottom) of 25px or thereabouts, give it a right attribute of 10px or so, and give it a Z-index of about 1. Insert that DIV into the masterpage and put the logo in it. It won't appear correctly in the XML Editor or in the Preview, but when you generate the output, the logo should appear at the bottom right corner of the page and should stay there as you scroll.kcann wrote:Question 1: Should I put the gradient in the <html> tag and the logo in the <body> tag? The solution also uses frames.
Masterpages are only used for online output and Word output, and Word would ignore the DIV. For PDF output, use page layouts. You specify the background in the page layout and you put the logo in the page layout in a footer frame.kcann wrote:Question 2: What is the Flare equivalent of frames for non-print media?
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Background image specified in Body tag
Hi Lisa
It totally makes sense to me now. Thanks again!
It totally makes sense to me now. Thanks again!
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Re: Background image specified in Body tag
Has anybody tried background images with Flare 5? I did ... and it doesn't work ...
I tried in the topic toolbar, in the <body>, in a <table>, in a <div> ... the result is ALWAYS:
A HTML Help with my standard settings from the browser - Flare seems to "forget" my WHOLE stylesheet almost completely. The only style coming through is the hover color of the dropdownhotspot ...
Has anybody got a hint for me? Is it a bug? I'm lost ...
I tried in the topic toolbar, in the <body>, in a <table>, in a <div> ... the result is ALWAYS:
A HTML Help with my standard settings from the browser - Flare seems to "forget" my WHOLE stylesheet almost completely. The only style coming through is the hover color of the dropdownhotspot ...
Has anybody got a hint for me? Is it a bug? I'm lost ...
Re: Background image specified in Body tag
Have a solution from MC Support:
Uncheck the checkboxes:
Target | Tab Advanced | Group Output Options | Generate resized copies of scaled images
and
Target | Tab Advanced | Group Output Options | Use lowercase filenames
Thsoe options seems to unlink the stylesheet ... for whatever reason ... has been reported ...
Uncheck the checkboxes:
Target | Tab Advanced | Group Output Options | Generate resized copies of scaled images
and
Target | Tab Advanced | Group Output Options | Use lowercase filenames
Thsoe options seems to unlink the stylesheet ... for whatever reason ... has been reported ...