<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background & Borders</title>
</head>
<style>
.hasnai {
text-align: center;
}
#box-1 {
background-color: red;
/* border-width: 5px;
border-style: dotted;
border-color: black; */
border: double 5px black;
border-radius: 15px;
}
#box-2 {
background-color: chartreuse;
border: 5px solid blue;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#box-3{
/* If you all properties togather than don't use background-image just use background */
/* background-image: url("img/hrhasnai.jpg")*/
background: url("img/hrhasnai.jpg") no-repeat center center/cover;
/* background-repeat: no-repeat;*/
/* background-position:100px 0px; */
/* background-position:center center; */
/* background-position:center top; */
/*background-size: cover; */
height: 300px;
width: 600px;
color: white;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#box-4{
background: url("img/flutter.png") no-repeat center center;
background-attachment:fixed;
}
</style>
<body>
<H1 class="hasnai">
Hasnain
</H1>
<div id="box-1">
<h1>Box One</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
</div>
<br>
<div id="box-2">
<h1>Box Two</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
</div>
<div id="box-3">
<h1>Box Three</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
</div>
<div id="box-4">
<h1>Box Four</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
</div>
<div id="box-5">
<h1>Box Five</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
architecto nam vel aut magnam ipsam.</p>
</div>
</body>
</html>
