How to position my clouds images in css away from each other?-CodePudding

Hey guys I'm stuck right now with my clouds in the same position. I have one cloud where it's supposed to be but the other cloud is not where it's supposed to be and I can't get it to a position on the webpage where I want it. Instead of it right over my other cloud. I want the small cloud to be on the right side of the page. Can anyone please help me?

These are my clouds

CSS

  @charset "utf-8";
  /* CSS Document */


  /*This is for the fresh farms and clouds image*/
  body
  {
  background-image: url("Image/cloud.png"),url("Image/cloud.png"), 
  url("Image/FreshFarmsBG.jpg");
  background-repeat: no-repeat;
  background-size: 10%,20%, cover;
  background-position: top right, top left, cover;

    height: auto;

    }

CodePudding user response：

The background position values should have a hyphen between each value so it would be

background-position: top-right, top-left, cover;

EDIT: What you can do is set the background to 1 image only so it would be

background-image:url("Image/FreshFarmsBG.jpg");

then in the .html file you can add 2 new elements using the img tag, and use the

float: left

attribute on the first image, and..

float: right

on the second image in the css file, don't forget to give each image a separate class so you can define each one separately. For example:

img .cloud1{
  float: left
}

img .cloud1{
  float: right
}