Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Frank van Rooijen 7 posts 27 karma points
    Nov 28, 2011 @ 16:48
    Frank van Rooijen
    0

    Background color for text on an image

    I am trying to add a background color to text that I have added to an image.

    When just adding a background color to an image that just contains text it works as described in the manual. But when I try to add a background color to text on my image nothing happens.

    At this moment I use the following url:
    http://localhost/imageGen.ashx?image=/media/16782/dina.png&class=myBanner&text=<bannerheader>My header</bannerheader><br/><bannerbody>my body</bannerbody>

    I use the following classes in the ImageGen.config

       <Class Name="default" OverridesQueryString="true">
    <Constrain>true</Constrain>
    <Compression>100</Compression>
    <ImageBaseDir>http://localhost</ImageBaseDir>;
    </Class>
    <Class name="banner">
    <InheritFromClass>default</InheritFromClass>
    <Valign>Top</Valign>
    </Class>
    <Class name="smallBanner" OverridesQueryString="true">
    <InheritFromClass>banner</InheritFromClass>
    <Width>50</Width>
    </Class>
    <Class name="myBanner" OverridesQueryString="true">
    <InheritFromClass>banner</InheritFromClass>
    <Width>239</Width>
    <Height>268</Height>
    </Class>
    <Class name="bannerText" OverridesQueryString="true">
    <Font>Arial</Font>
    <BgColor>FFFFFF</BgColor>
    <AntiAlias>True</AntiAlias>
    <Transparent>False</Transparent>
    </Class>
    <Class name="bannerHeader" OverridesQueryString="true">
    <InheritFromClass>bannertext</InheritFromClass>
    <FontSize>20</FontSize>
    </Class>
    <Class name="bannerBody" OverridesQueryString="true">
    <InheritFromClass>bannertext</InheritFromClass>
    <FontSize>14</FontSize>
    </Class>

    Any help is welcome.

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Nov 28, 2011 @ 17:00
    Douglas Robar
    0

    When you place text on a solid background color, the text edges are anti-aliased against that solid background to create nice smooth text. If you add the &transparent=true option (and are using a format of gif or png that supports transparency) you'll see the background color disappear to be transparent, and the text will remain with a slight 'halo' around it which is the antialiasing to blend in with the background color. That way you could place the text on top of other parts of your site (a background image for your navigation bar, for instance).

    When you put text on top of an image, though, the background color is still used for antialiasing the edges of the text, but... the solid background is always made transparent so you can see the image below it. Otherwise you would never be able to put text on top of an image and still see the image. 

    If you want a block of text with a solid background color on top of an image I'd recommend you a text-only image and set it on top of the image (which might also be resized with ImageGen) using z-ordering in your css.

    cheers,
    doug. 

Please Sign in or register to post replies

Write your reply to:

Draft