Background Image in Style Doesn't Appear in HTML5 Output
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Background Image in Style Doesn't Appear in HTML5 Output
My tip styles have icons (a background image). The image/icon shows up perfectly in my print output, but the background image won’t show up at all in my HTML5 output.
My target has the correct stylesheet and stylesheet medium selected.
Any ideas what's going on?
**EDIT: The HTML5 output builds fine WITH the image when it's a .PNG file, but it's the .EPS file that does not show up in the HTML5 output. I'm having issues with making the images crisp and clear, not blurry, in BOTH print AND web outputs.... PNGs are blurry in print and fine in web, and EPS's are perfect in print but don't show up in Web!! Is there something I'm missing here!?**
Here’s what the print output looks like: Here’s the HTML5 output: Here’s the code:
My target has the correct stylesheet and stylesheet medium selected.
Any ideas what's going on?
**EDIT: The HTML5 output builds fine WITH the image when it's a .PNG file, but it's the .EPS file that does not show up in the HTML5 output. I'm having issues with making the images crisp and clear, not blurry, in BOTH print AND web outputs.... PNGs are blurry in print and fine in web, and EPS's are perfect in print but don't show up in Web!! Is there something I'm missing here!?**
Here’s what the print output looks like: Here’s the HTML5 output: Here’s the code:
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Background Image in Style Doesn't Appear in HTML5 Output
Someone more knowledgeable than I may wander by soon, but my first hunch would be that the format of the image -- .eps -- isn't supported by browsers. What happens if you use a different image format?
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propellus Maximus
- Posts: 551
- Joined: Wed Mar 05, 2008 10:50 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
This doesn't resolve your EPS issue, but I've found that SVG file types produce high-quality images for both web and PDF. However, there are a few things to consider when using SVGs:
- Java has to be installed to the PC and/or build machine.
- If generating HTML Help, you will need to configure the target file to either "generate resized copies of scaled images" or "generate web-safe images" and select PNG. This is because CHM file types are based on IE7 standards, which does not support the display of SVG images. The image quality is still decent.
- If hosting the web output on a server, in IIS you will need to configure the MIME type for the .svg extension to use "image/svg+xml".
*Edit*: I should note that I only use SVGs for our notes, tips, cautions, etc., but use PNGs for all other images in our outputs.
- Java has to be installed to the PC and/or build machine.
- If generating HTML Help, you will need to configure the target file to either "generate resized copies of scaled images" or "generate web-safe images" and select PNG. This is because CHM file types are based on IE7 standards, which does not support the display of SVG images. The image quality is still decent.
- If hosting the web output on a server, in IIS you will need to configure the MIME type for the .svg extension to use "image/svg+xml".
*Edit*: I should note that I only use SVGs for our notes, tips, cautions, etc., but use PNGs for all other images in our outputs.
Kellie
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
Thank you both!
Nita -- I can use PNG and it comes out crisp and clear in HTML5 output. But the PNG doesn't come out clear in PDFs (I have no idea why), and I was wanting to avoid having to create a print and non-print medium in the stylesheet for each style.
Kellie -- Great suggestion. I tried using SVG images, and they built beautifully in print but do not show up at all in my HTML5 output even after configuring the target settings and installing Java.
Hmmmm.
Nita -- I can use PNG and it comes out crisp and clear in HTML5 output. But the PNG doesn't come out clear in PDFs (I have no idea why), and I was wanting to avoid having to create a print and non-print medium in the stylesheet for each style.
Kellie -- Great suggestion. I tried using SVG images, and they built beautifully in print but do not show up at all in my HTML5 output even after configuring the target settings and installing Java.
Hmmmm.
-
- Propellus Maximus
- Posts: 551
- Joined: Wed Mar 05, 2008 10:50 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
Hmmm indeed! A few guesses/questions:AudreyLange wrote:I tried using SVG images, and they built beautifully in print but do not show up at all in my HTML5 output even after configuring the target settings and installing Java.
Hmmmm.
- Did you clear the browser cache and use CTRL+F5 to perform a refresh after clearing the cache? Or maybe tried viewing in a different browser, previously not used to view a particular topic?
- When generating the output, presumably Flare didn't return any errors stating, "JavaScript is required to process SVG files"?
- Are you viewing locally or is this output that has been published to a server?
Kellie
Re: Background Image in Style Doesn't Appear in HTML5 Output
I know there's an option in Capture to use a separate format for Print and HTML output in a pretty "single-sourced" fashion, but if you're interested, someone (or some web help) more knowledgeable than I would have to provide you details.
-Dan, Propellerhead-in-training
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
I'm still working on the image issue -- but while I'm at it, I have another question to throw out there.
((Kellie, to answer your questions:
- I did clear the cache, refresh, and view in a different browser.
- No, I didn't get any errors from Flare. When generating the output, presumably Flare didn't return any errors stating, "JavaScript is required to process SVG files"?
- Viewing it locally. It's not published to a server.))
My new question:
Does anyone know how to move the background image a tiny bit so that it isn't right smack against the edge of the background? It's smooshed up in the top left corner, touching the edges, which makes for a really awkward looking style when I have a background color and a border !
* I tried adjusting padding, but it only affects the text.
* I tried adjusting margins, but it doesn't move the background image within the background.
* I tried adding canvas size to the images in Photoshop, but the images became pixelated when I saved them from there.
Thank y'all for your help! I'm new at cascading stylesheets and really appreciate all the feedback!
((Kellie, to answer your questions:
- I did clear the cache, refresh, and view in a different browser.
- No, I didn't get any errors from Flare. When generating the output, presumably Flare didn't return any errors stating, "JavaScript is required to process SVG files"?
- Viewing it locally. It's not published to a server.))
My new question:
Does anyone know how to move the background image a tiny bit so that it isn't right smack against the edge of the background? It's smooshed up in the top left corner, touching the edges, which makes for a really awkward looking style when I have a background color and a border !
* I tried adjusting padding, but it only affects the text.
* I tried adjusting margins, but it doesn't move the background image within the background.
* I tried adding canvas size to the images in Photoshop, but the images became pixelated when I saved them from there.
Thank y'all for your help! I'm new at cascading stylesheets and really appreciate all the feedback!
You do not have the required permissions to view the files attached to this post.
-
- Propellus Maximus
- Posts: 551
- Joined: Wed Mar 05, 2008 10:50 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
I use divs for my notes, and use the following to control the background positioning. However, I haven't tried this when using a paragraph tag.
FWIW, here's the code I use for my div notes:
Code: Select all
background-position: left center;
Code: Select all
div.Note
{
color: #000000;
border-bottom: solid 1px #000000;
border-top: solid 1px #000000;
line-height: 11pt;
margin-top: 6pt;
margin-bottom: 6pt;
padding-left: 17pt;
padding-right: 5pt;
padding-top: 5pt;
padding-bottom: 5pt;
mc-next-tag: p;
mc-auto-number-position: inside-head;
background-color: #e5e5e5;
mc-auto-number-format: '{b}Note{/b}: ';
page-break-inside: avoid;
background-repeat: no-repeat;
background-position: left center;
background-image: url('../../Global_Images/Note.svg');
}
Kellie
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: Background Image in Style Doesn't Appear in HTML5 Output
In general, the background-position can also contain a location x/y in pixels or %. Refer to http://www.w3schools.com/cssref/pr_back ... sition.asp for more detail.
Like Kellie, I don't know how this behaves in a p tag, so you'll have to try it out.
As for the original question:
1) the different quality needs for print/online are source of many discussions. There is a Tip in the Help about images:
http://webhelp.madcapsoftware.com/flare ... ges|_____1
2) re. the eps/svg type images, I seem to remember that I needed some program like ghostscript and JRE to get those rendering and/or converting. But if there is no error message, I can't tell if this is (still) true.
Like Kellie, I don't know how this behaves in a p tag, so you'll have to try it out.
As for the original question:
1) the different quality needs for print/online are source of many discussions. There is a Tip in the Help about images:
http://webhelp.madcapsoftware.com/flare ... ges|_____1
2) re. the eps/svg type images, I seem to remember that I needed some program like ghostscript and JRE to get those rendering and/or converting. But if there is no error message, I can't tell if this is (still) true.
Using Flare 10.2 and Flare 11 on Win 7
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Background Image in Style Doesn't Appear in HTML5 Output
As a very basic bodge, you could add a few pixels of empty space to the top and left of the icon (but it would be nice to get it to work properly, of course).
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
Thank y’all for all the feedback and suggestions!
Kellie & Lydia – Yay! I knew the solution had to be with background-position but I couldn’t figure out how! Lydia, that link was especially helpful. Thank you!
I used the background-position style (with percentages), and it looks awesome when I have a note that’s just 1-3 lines of text, but the problem with using percentages is that, as the note gets longer, the icon moves further down inside the note box. I’d like for the icon to always stay aligned with the word “Note†at the top, so I figured the solution would be to use pixels instead of percentages, but when I do this, the background image doesn’t show up at all. I’ve tried just 1px 1px and up to 50px, and the image just doesn’t show up. Not sure what this is all about…
:::::::::: background-position: 1% 25%; ::::::::::
:::::::::: background-position: 5px 5px; ::::::::::
Kellie & Lydia – Yay! I knew the solution had to be with background-position but I couldn’t figure out how! Lydia, that link was especially helpful. Thank you!
I used the background-position style (with percentages), and it looks awesome when I have a note that’s just 1-3 lines of text, but the problem with using percentages is that, as the note gets longer, the icon moves further down inside the note box. I’d like for the icon to always stay aligned with the word “Note†at the top, so I figured the solution would be to use pixels instead of percentages, but when I do this, the background image doesn’t show up at all. I’ve tried just 1px 1px and up to 50px, and the image just doesn’t show up. Not sure what this is all about…
:::::::::: background-position: 1% 25%; ::::::::::
:::::::::: background-position: 5px 5px; ::::::::::
You do not have the required permissions to view the files attached to this post.
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: Background Image in Style Doesn't Appear in HTML5 Output
note, x-ref: similar thread there http://forums.madcapsoftware.com/viewto ... nd#p103176
Using Flare 10.2 and Flare 11 on Win 7
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: Background Image in Style Doesn't Appear in HTML5 Output
Tried setting pixels for the background position myself and I get the same result - the icon is gone then. This is also the case when using a div instead of a p tag.
Using Flare 10.2 and Flare 11 on Win 7
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
Ahhh, thanks Lydia. I added a comment to that thread. I'll continue researching, too. Thanks for all your help!
-
- Propeller Head
- Posts: 33
- Joined: Mon May 19, 2014 9:01 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
Y'all have been so helpful that I thought I'd run another style issue by you before starting a new post.
The text of my note stays within the border's boundaries in my PDF output, but when I build it in HTML5, the text goes outside of the border when it goes beyond a couple lines long.
Here's how it looks in print (Good!): Here's how it looks in HTML5 (Bad!): And here's the code:
Any ideas on how to fix this?
I tried changing min-height and then the height properties to larger pixels, but then it's just a big empty box when there are only a couple lines of text. I need to figure out what property allows the border to adjust to the right size according to the amount of text.
The text of my note stays within the border's boundaries in my PDF output, but when I build it in HTML5, the text goes outside of the border when it goes beyond a couple lines long.
Here's how it looks in print (Good!): Here's how it looks in HTML5 (Bad!): And here's the code:
Code: Select all
p._BestPractice_PNG
{
mc-auto-number-format: '{b}Best Practice: {/b}';
font-weight: normal;
font-family: Calibri;
font-size: 100%;
color: #000000;
padding: 5px;
padding-right: 15px;
padding-left: 38px;
padding-bottom: 15px;
margin: 10;
margin-right: 100px;
background-image: url('../Images/Icons/BestPractice_PNG.png');
background-repeat: no-repeat;
background-color: #d3d3d3;
background-position: 1% 25%;
border-radius: 8px;
border-color: #000000;
border: solid 0px;
height: 38px;
min-height: 36px;
}
I tried changing min-height and then the height properties to larger pixels, but then it's just a big empty box when there are only a couple lines of text. I need to figure out what property allows the border to adjust to the right size according to the amount of text.
You do not have the required permissions to view the files attached to this post.
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: Background Image in Style Doesn't Appear in HTML5 Output
I would use the min-height only (if you want to assure a certain minimal height of the box). Leave the height at (default), which is 'not set'. The box should then adapt to your content, if it goes beyond the min-height. At least it does for my quick test.
Using Flare 10.2 and Flare 11 on Win 7
-
- Propeller Head
- Posts: 42
- Joined: Tue Jan 21, 2014 11:55 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
I had a similar problem. I had to use a min-height for the default medium and height for the print medium. Also, it looks crazy in Flare's XML editor, but fine when I do a preview.AudreyLange wrote:...The text of my note stays within the border's boundaries in my PDF output, but when I build it in HTML5, the text goes outside of the border when it goes beyond a couple lines long....Any ideas on how to fix this?
I tried changing min-height and then the height properties to larger pixels, but then it's just a big empty box when there are only a couple lines of text. I need to figure out what property allows the border to adjust to the right size according to the amount of text...
I am using UL's, so the code is a little different, but here is what I have going on:
Default medium
Code: Select all
/*
BEGIN NOTE STYLE:
The following entries automate using an icon for notes by using unordered lists with a custom background image. The text is rendered to the right of the background image using left padding, and the entire background image is always displayed by using a min-height. There is a related section under the print medium to manage Flare quirks with single-sourcing PDF output.
*/
ul.note
{
list-style-type: none;
padding: 0pt;
margin: 0pt;
}
ul.note > li
{
background: url('../../image/note_v2.png')no-repeat 5pt 5pt;
background-color: #EEEEEE;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 35pt; /* The image height is 46; this is less than so that the background padding lines up */
/* The min-height does not work for PDF output, so for the print medium below, we use height instead */
padding: 5pt 5pt 5pt 44pt;
margin: 12pt 2pt 12pt 2pt;
}
ul.note p
{
margin: 0pt;
padding 0pt;
}
/* END NOTE STYLE */
Code: Select all
/*
BEGIN NOTE STYLE:
See the notes in the note style section under the default medium.
*/
ul.note > li
{
background: url('../../image/note_v2.png')no-repeat .5in .5in;
height: 48pt;
}
/* END NOTE STYLE */
Dan Lemke of Thomson Reuters
-
- Propeller Head
- Posts: 42
- Joined: Tue Jan 21, 2014 11:55 am
Re: Background Image in Style Doesn't Appear in HTML5 Output
By the way, we use the UL's instead of paragraphs because (1) they are easy to insert in a page and (2) they can legally contains things like tables and lists.
Dan Lemke of Thomson Reuters