0

Evening guys, i already use background-image several times and i found something that i want to try, how can we make a random position image with background-repeat in CSS, i mean i can make a repeated image just fine and its quite easy but when i want to make my image repeated randomly and i don't quite find the way to do it. So this is my question :

  1. in the first place, can we really make our image repeated randomly ? not changing image with multiple image or anything but just randomly repeated 1 image in different position

  2. second, how can we do it using CSS?

    for reference i already tried several solution but i still can not solve it:

Random CSS background image

CSS: Randomly distributed background image?

if you confused, for example i want to make a cloud randomly appear with only 1 image like this: (please look at the small cloud)

https://drive.google.com/file/d/1ubOBFNLpDLHpyoZKEpv4KKzeINpqzshi/view?usp=sharing

can we really do it? because if we only repeated it using background-repeat i find its not good

Community
  • 1
  • 1
Rakis Friski
  • 551
  • 1
  • 7
  • 26

1 Answers1

0

I can say there are two ways to do this, but here you will not be using the background-repeat property. The explanation below is considering the cloud example that is mentioned in the question.

Method 1:

  1. Set the background color as per your choice
  2. write the html for few images or the icons(whichever looks good).
  3. using CSS make their position relative or absolute(based on the other content that you are going to use with these icons). How to do it?
  4. Position these where ever you need in your web page using top, bottom, left, right properties of relative and absolute positioning.
  5. If there is a need to take all these images or icons in background use z-index property.

check this example.

.one{
    position: relative;
    left: 30px;
    top:50px;
    border: 3px solid #73AD21;
}
.two{
position: relative;
    left: 100px;
    top:200px;
    border: 3px solid #73AD21;
}
.three{
position: relative;
    left: 300px;
    top:100px;
    border: 3px solid #73AD21;
}
.four{
position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>
<body>
<i class="fa fa-home one"></i>
<i class="fa fa-home two"></i>
<i class="fa fa-home three"></i>
<i class="fa fa-home four"></i>

<body>

Method 2

  1. Use the tools such as adobe XD or gravit designer to design your background image and use it directly in your web page.
Kedar Kodgire
  • 482
  • 6
  • 22