How to add another html tag (i.e. span) before the field value renders using hook_preprocess()?
Not sure how it would be done with a preprocess hook, but an alternative would be to instead copy field.tpl.php into your theme, rename it according to the convention of field-name-[field_name], and simply add the &lt;span&gt; and &lt;/span&gt; elements at the appropriate points in the template, like so:

&lt;div class="&lt;?php print $classes; ?&gt;"&lt;?php print $attributes; ?&gt;&gt;
    &lt;span class="bg-color-rd"&gt;
        &lt;?php if (!$label_hidden): ?&gt;
        &lt;div class="field-label"&lt;?php print $title_attributes; ?&gt;&gt;&lt;?php print $label ?&gt;:&amp;nbsp;&lt;/div&gt;
        &lt;?php endif; ?&gt;
        &lt;div class="field-items"&lt;?php print $content_attributes; ?&gt;&gt;
            &lt;?php foreach ($items as $delta =&gt; $item): ?&gt;
            &lt;div class="field-item &lt;?php print $delta % 2 ? 'odd' : 'even'; ?&gt;"&lt;?php print $item_attributes[$delta]; ?&gt;&gt;&lt;?php print render($item); ?&gt;&lt;/div&gt;
            &lt;?php endforeach; ?&gt;
        &lt;/div&gt;
    &lt;span&gt;
&lt;/div&gt;