I am looking to create a design where the background images in CSS display increasing numbers per article, like this example:
This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: Text as background images for CSS ( Text as background images for CSS ) which includes a JS FIDDLE with relevant code snippets.
var $divs = $('.randbg'),
alpha = 'abcdefghijklmnopqrstuvwxyz';
$divs.each(function ea() {
var letter = alpha[Math.floor(Math.random() * alpha.length)].toUpperCase();
$(this)
.attr('data-content', letter)
.html('<img src="http://placehold.it/75x75&number=' + letter + '"/>');
}).randbg {
width: 7px;
height: 75px;
}
.randbg:before {
content: attr(data-content);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="randbg">What happens</div>
<div class="randbg">Why not</div>
<div class="randbg"></div>
<div class="randbg"></div>Below is the code I am currently working with:
<?php $i2=0;
foreach ($items2 as $item2) {
if ($i2 < 4) {
printf('<div class="right-now-box">');
printf('<img src="%s" class="width-100">',$item2['image2']);
printf('<a target="_blank" class="left-sidebar-news-text" href="%s">%s</a>', $item2['link2'], $item2['title2']);
printf('</div>');
$i2++;
}
}
?>