Clash Royale CLAN TAG#URR8PPP

Repeating background of icons

Based on this example of an icon being used as a background on codepen, how can I repeat different icons over regular intervals for the background, is something like this possible with css only?

This uses :after but only provides a single icon in the content (f087), is there a reasonable way to make it look more like this: https://lololol.cool/907txl0ko9.jpg

:after

content

f087

.section:after
content: "f087";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 400px;
color: lightblue;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1;



2 Answers
2

An idea is to consider the icon as SVG that you can easily use as background and repeat it. You can for this use the last version of Font Awesome that rely on SVG.

Here is an example:

.box
height:200px;
border:1px solid;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path fill="red" d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"></path></svg>') top left/60px 50px;


<div class="box">
</div>

Simply select the icon you want to use, inspect the element, get the SVG code and then use as background and you will be able to repeat it.

The structure of the icon is the same for all. It's an SVG element and a path inside it with a the fill attribute to specify the color you want (you can remove everything else you find like classes).

fill

You cannot do that only using CSS. you have to use javascript for this solution. First you need to make a array with image URLs and select image randomly after that apply to some div or background. Here is how you can do that.

<script type="text/javascript">
if (document.getElementById) window.onload = swap ;
function swap()
var numimages=7;
rndimg = new Array("images/pmoblogo7.jpg", "images/pmoblogo6.jpg", "images/pmoblogo5.jpg", "images/pmoblogo4.jpg", "images/pmoblogo3.jpg", "images/pmoblogo2.jpg", "images/pmoblogo.jpg");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")";

</script>
<div id="banner"></div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.