Hi there! I'm currently exploring options to display different images for each section of a grid I've put together:
Take a look at the CSS I'm using:
background-image: url("my_image.jpg");
background-size: 50px auto;
float: right;
height: 150px;
width: 34%;
I initially considered using multiple image tags with a fixed position, but I'm eager to find a more efficient and streamlined approach. I've stored all the image URLs in a jQuery dictionary.
var faceDict = ["an array of image URLs"]
for (var faceIndex = 0; faceIndex < faceDict.length; faceIndex++) {
$('.face-container').append("<img height='50' src='" + faceDict[faceIndex] + "'/>"); });
You can view my progress on jFiddle here: http://jsfiddle.net/nUMDF/