სურათი ფონად
ბლოკებს ჩვენ შეგვიძლია ფონად დავუყენოთ სურათი. სურათი შეიძლება გავამრავლოთ ან იქს-ღერძის, ან იგრეკ-ღერძის გასწვრივ. ასევე შეგვიძლია არ გავამრავლოთ, დავაყენოთ ცენტრში ან რომელიმე კუთხეში. გავაკეთოდ ფიქსირებული, შევავსოთ მთელი ბლოკი.
HTML კოდი:
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;
}
მაგალითები სურათის ჩასმაზე ფონად არის შემდეგ ბმულზე