Here's a possible fix for your issue.
To see a live demo, visit: http://jsfiddle.net/hM6dj/4/
The solution involves creating images of letters with transparent backgrounds.
Example
Selecting the letter 'A', you'll notice that the area around it is white while the inside remains transparent.
Code
You just need to overlay this transparent image on top of another image. The background will show through the transparent areas, creating a patterned 'A'.
Note: I used data URLs for the foreground letter to avoid hosting the images externally. Learn more about data URLs here.
HTML
<div class='container'>
<div class='foreground foreground-Black'> </div>
<div class='background background-Cow'> </div>
</div>
<h2>Foreground Options</h2>
<input type='button' class='btnforeground' data-class='foreground-Black' value="Black" />
<input type='button' class='btnforeground' data-class='foreground-Red' value="Red" />
<input type='button' class='btnforeground' data-class='foreground-Green' value="Green" />
<h2>Background Options</h2>
<input type='button' class='btnbackground' data-class='background-Cow' value="Cow" />
<input type='button' class='btnbackground' data-class='background-Stars' value="Stars" />
<input type='button' class='btnbackground' data-class='background-Dots' value="Dots" />
JS
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
CSS
.container{
position:relative;
width: 200px;
height: 200px;
}
.foreground, .background{
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:absolute;
z-index:100;
}
.background{
background-repeat:repeat;
z-index:50;
}
.background-Cow{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/424.jpg);
}
.background-Stars{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/48.jpg);
}
.background-Dots{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/521.jpg);
}
/* Omitted due to StackOverflow character restrictions.
.foreground-Black{
background-image: url();
}
.foreground-Green{
background-image: url();
}
.foreground-Red{
background-image: url();
}
*/
EDIT
Upon inspection with Google Chrome's Developer tools, there seems to be HTML mixed in with the JavaScript code (notably the paragraph tags <p>, </p>).
It's recommended to wrap jQuery events within a ready function for better organization. The JS Fiddle automatically did this, but here's the updated code snippet:
JS
$(function(){
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
});
EDIT2
A couple of points to consider:
Your CSS classes:
- .foreground
- .background
- .foreground-Black
- .foreground-Cow
- and more...
Most of these classes don't seem to have the properties set as per the example provided. You can directly copy the relevant CSS from the jsfiddle link.
- You've named the container class as
.viewer but referenced it as .container in your JavaScript. Be sure to align the class names for proper functionality.