სურათი ფონად

ბლოკებს ჩვენ შეგვიძლია ფონად დავუყენოთ სურათი. სურათი შეიძლება გავამრავლოთ ან იქს-ღერძის, ან იგრეკ-ღერძის გასწვრივ. ასევე შეგვიძლია არ გავამრავლოთ, დავაყენოთ ცენტრში ან რომელიმე კუთხეში. გავაკეთოდ ფიქსირებული, შევავსოთ მთელი ბლოკი. 

HTML კოდი:
<!DOCTYPE HTML>
<html>
<header>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>სურათი ფონად</title>
        <link  href="style.css" type="text/css" rel="stylesheet" />
</header>
<body>
    <div class="bloki">
            
        <div class="patara">
            <p>დამალულია ორი ფლამინგო</p>
        </div>
         
    </div>
    <br><br>


    
</body>
</html>
CSS კოდი:
*{
 padding: 0;
 margin: 0;
}

body{
  background-color: #F0EAD6;
  font-size: 26px;
  color: #F0EAD6;
}

.bloki{
  width: 600px;
  height: 500px; 
  margin:50px auto;
  background-color:#4089DB;
  background-image: url(https://m.dw.com/image/19046487_401.jpg);
  //background-repeat: repeat;
  //background-repeat: repeat-x;
  background-repeat: no-repeat;
  background-position:  center top;
  background-size: cover;
  // background-size: contain;


  //ყველა თვისების ერთიანად ჩაწერა
  /*background: #4089DB url(https://m.dw.com/image/19046487_401.jpg) no-repeat top fixed;*/
}

.patara{
  width: 600px;
  height: 500px; 
  margin:0px auto;
  background-color:#4089DB;
  box-sizing: border-box;
}

.patara p{
  width: 600px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  color: antiquewhite;
  padding-top: 200px;
}

.patara:hover{
  background-color: rgb(1, 15, 15);
  opacity: 0;
  transition: all 3s;
}

მაგალითები სურათის ჩასმაზე ფონად არის შემდეგ ბმულზე

მსგავსი სიახლე