<html>
<head>
<title>Background Blend Mode Example - RJM Programming - August, 2025 ... thanks to https://www.google.com/search?q=background-blend-mode+example&rlz=1C5OZZY_en&oq=background-blend-mode+example&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjINCAQQABiGAxiABBiKBTINCAUQABiGAxiABBiKBTINCAYQABiGAxiABBiKBTIKCAcQABiABBiiBDIHCAgQABjvBdIBCDg3MDFqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8</title>
<style>
.blend-container {
width: 400px;
height: 250px;
/*
background-image: url('https://via.placeholder.com/400x250/FF0000/FFFFFF?text=Image+1'),
url('https://via.placeholder.com/400x250/0000FF/FFFFFF?text=Image+2');
*/
background-image: url('//www.rjmprogramming.com.au/ITblog/400/250/'),
url('//picsum.photos/400/250/');
background-color: rgba(0,255,0,0.5); /* green; */ /* This will blend with the result of the images */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: overlay, multiply; /* Blends Image 1 with Image 2 using 'overlay',
then the result with the background-color using 'multiply' */
border: 1px solid #ccc;
margin: 20px;
}
</style>
<script type=text/javascript>
var sixrs = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

function enough(proposed) {
var startcol='rgba(,,,0.5)';
startcol=startcol.replace('(', '(' + eval(sixrs.indexOf(proposed.substring(0).substring(0,1)) * 16 + eval(sixrs.indexOf(proposed.substring(1).substring(0,1)) * 1)));
startcol=startcol.replace(',', ',' + eval(sixrs.indexOf(proposed.substring(2).substring(0,1)) * 16 + eval(sixrs.indexOf(proposed.substring(3).substring(0,1)) * 1)));
startcol=startcol.replace(',0.', '' + eval(sixrs.indexOf(proposed.substring(4).substring(0,1)) * 16 + eval(sixrs.indexOf(proposed.substring(5).substring(0,1)) * 1)) + ',0.');
return startcol;
}

function bcthis(ocol) {
document.getElementById('thediv').style.backgroundColor=enough(ocol.value.replace(/^\#/g,'').toLowerCase());
}

</script>
<script type=text/javascript src='//www.rjmprogramming.com.au/lefttopcursor.js?rand=87658765&scp=1F378'></script>
</head>
<body>
<h1>Background Blend Mode Example</h1>
<h3>RJM Programming - August, 2025 ... <input style="opacity:0.5;" onchange=bcthis(this); type=color id=thecol value='#00ff00'></input> <button style=background-color:orange; onclick="location.href=document.URL;">Again ...</button></h3>
<h4>Thanks to <a target=_blank title='https://www.google.com/search?q=background-blend-mode+example&rlz=1C5OZZY_en&oq=background-blend-mode+example&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjINCAQQABiGAxiABBiKBTINCAUQABiGAxiABBiKBTINCAYQABiGAxiABBiKBTIKCAcQABiABBiiBDIHCAgQABjvBdIBCDg3MDFqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8' href=https://www.google.com/search?q=background-blend-mode+example&rlz=1C5OZZY_en&oq=background-blend-mode+example&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjINCAQQABiGAxiABBiKBTINCAUQABiGAxiABBiKBTINCAYQABiGAxiABBiKBTIKCAcQABiABBiiBDIHCAgQABjvBdIBCDg3MDFqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8'>https://www.google.com/search?q=background-blend-mode+example&rlz=1C5OZZY_en&oq=background-blend-mode+example&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjINCAQQABiGAxiABBiKBTINCAUQABiGAxiABBiKBTINCAYQABiGAxiABBiKBTIKCAcQABiABBiiBDIHCAgQABjvBdIBCDg3MDFqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8</a></h4>

<div class="blend-container" id="thediv"></div>

</body>
</html>