overlay image with text

Question

With all the snipits you would think I would find this simple to do. Every time the users come up with a new "line of business" a new image has to be created and programatically displayed. What would work best, I think, is to have a background image and overly it with text by logic. I'm just not adept enough to get this done.

<cfif board_type eq "Elite">
            <img src="images/jobboard_elite_sm.gif" border="0">
        <cfelseif board_type eq "Custom">
            <img src="images/jobboard_thc_sm.gif" border="0">
        <cfelseif board_type eq "Basic">
            <img src="images/jobboard_basic_sm.gif" border="0">
        <cfelseif board_type eq "Intern">
            <img src="images/jobboard_newentry_sm.gif" border="0">
        <cfelseif board_type eq "Premium">
            <img src="images/jobboard_premium_sm.gif" border="0">
        </cfif>

UPDATE:

This is what I ended up with. Thank you!

    <cfinvoke component="control.jobads.cfc.basic" method="getJobTypeByType" type="#attributes.board_type#" returnvariable="typeInfo">
    <style>
        #BoardIcon {
        position:relative;
        background-position:center;
        background-repeat:no-repeat;
        /*customizeable values*/
        background-image:url('images/jobboard_blank_icon_sm.gif');
        /*based on your particular use case, I'm guessing you won't ever want to change the width/height of the div, so you can probably just leave those set in the main styles declaration for this div and exclusively swap out the background*/
        width:200px;
        height:40px;
    }
    #BoardIcon p {
        /*centers text in div and vertically aligns it to the bottom*/
        position:absolute;
        bottom:5;
        left:0;
        right:0;
        text-align:center;
        /*some styles I set so the text would stand out*/
        color:white;
        font-weight:bold;
        font-size:24px;
    }
    </style>

    <script>
        $(document).ready(function(){
            $('#BoardTypeText').html(<cfoutput>'#attributes.board_type#'</cfoutput>);//sets the text of the paragraph to the option value)
        });
    </script>
    <table>
        <tr>
            <td>
                <div id="BoardIcon">
                    <p id="BoardTypeText">
                    </p>
                </div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="ModifySurveyHeaderFooterButton" type="button" value="Modify Survey Email Header/Footer">
            </td>
            <td>
                    <table>
                        <tr><td align="center">
                                Change Boards:
                            </td></tr>
                        <tr>
                            <td>
                                <cfparam name ="change_board_type" default="custom">
                                <cfform name="boardchangeform" id="boardchangeform" action="index.cfm?fa=home&board_type=#change_board_type#">
                                <cfselect name="change_board_type" query="boardTypes" value="ad_type" display="description" selected="#attributes.board_type#" queryposition="below" onchange="submitchangeboardtype(this.value);">
                                    <!--- <option value=""></option> --->
                                </cfselect>
            <script language="javascript">
                function Submitchangeboardtype(theSelectValue){                          $("body").css("cursor","progress");                                    $('#BoardTypeText').html(theSelectValue);//sets the text of the paragraph to the option value)
                                            document.boardchangeform.action='index.cfm?fa=home&board_type=' + theSelectValue;
    document.boardchangeform.submit();
                                            return True;
                                        }
                                    </script>

                                </cfform>
                            </td>
                        </tr>
                    </table>
                </td>
        </tr>

Answer 1

You could set the image as a background image on a container containing your text:

<div class="bg-img elite">
    <p>Elite Image Text</p>
</div>
<div class="bg-img thc">
    <p>THC Image Text</p>
</div>

<style>
  div.elite {
    background-image:url(elite.gif);
    width:***THIS IMAGE WIDTH***px;
    height:**THIS IMAGE HEIGHT**px;
  }
  div.thc {
    background-image:url(thc.gif);
    width:***THIS IMAGE WIDTH***px;
    height:**THIS IMAGE HEIGHT**px;
  }
</style>

So this would make your text appear (with default text styles) at the top-left of the div, and the div would show your image as the background without any trimming or letter-boxing. If you wanted to move the text to the bottom, you could add position:relative to the styles for those divs and div.bg-img p {position:absolute;bottom:0;} and the bottom of your P tag would line up with the bottom of the div. This solution has drawbacks, as you may have to face questions about what happens to the text if the text takes up more space than the image. There are a few other potential issues, too (like what happens when the window is smaller than the div), but those are all small problems that you can solve one at a time. This is a solution that I use on occasion.

Another potential solution is absolute-positioning the image behind the text or the text over the image (and figuring out which you should choose will depend on your specific needs).

UPDATE:

$(document).ready(function(){
	$('select').on('change',function(){
        $('div#results').removeClass()//removes all classes
            .addClass($(this).val())//gives the div a class corresponding to the selected value
            .find('p').html('The current class is '+$(this).val());//sets the text of the paragraph to the option value
    });
});

#results {
    position:relative;
    background-position:center;
    background-repeat:no-repeat;
    /*customizable values*/
    background-color:yellow;
    /*based on your particular use case, I'm guessing you won't ever want to change the width/height of the div, so you can probably just leave those set in the main styles declaration for this div and exclusively swap out the background*/
    width:200px;
    height:200px;
}
#results p {
    /*centers text in div and vertically aligns it to the bottom*/
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    /*some styles I set so the text would stand out*/
    color:red;
    font-weight:bold;
    font-size:16px;
}
#results.Elite {background-image:url('http://lorempixel.com/g/200/280')}
#results.Custom {background-image:url('http://lorempixel.com/g/200/310')}
#results.Basic {background-image:url('http://lorempixel.com/g/200/340')}
#results.Standard {background-image:url('http://lorempixel.com/g/200/370')}
#results.Premium {background-image:url('http://lorempixel.com/g/200/400')}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="change_board_type" >
	<option value="Elite">Elite</option>
	<option value="Custom">Custom</option>
	<option value="Basic">Basic</option>
	<option value="Standard">Standard</option>
	<option value="Premium">Premium</option>
</select>
<div id="results"><p>Change select box to see the div and text change</p></div>