<!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>Height, Width, borders and backgrounds </title>
<style>
#firstPara{
background-color: red;
height: 100px;
width: 455px;
border-width: 4px;
border-color: green;
border-style: solid;
border-radius: 3px;
}
#SecondPara{
background-color: rosybrown;
height: 100px;
width: 455px;
border-top: 2px solid violet;
border-bottom: 2px solid rgb(130, 238, 130);
border-right: 2px solid rgb(215, 238, 130);
border-left: 2px solid rgba(235, 10, 186, 0.836);
border-top-left-radius: 4px;
border-top-right-radius: 14px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 24px;
}
#ThirdPara{
height: 500px;
width: 616px;
background-image: url(https://images.unsplash.com/photo-1562322140-8baeececf3df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80);
border: 2px solid red;
background-repeat: no-repeat; /* repeat-x and repeat-y will make it repeat on x and y axis*/
background-position: center center;
/* background-position: 192px 34px; */
background-position: t;
}
</style>
</head>
<body>
<h3>This is Heading</h3>
<p id="firstPara">This is a paragraph</p>
<h3>This is Second Heading</h3>
<p id="SecondPara">This is my second paragraph</p>
<h3>This is Third paragraph</h3>
<p id="ThirdPara">This is my Third paragraph</p>
</body>
</html>
No comments:
Post a Comment