04_Background&Borders_Class
Sun Mar 21 2021 17:06:11 GMT+0000 (Coordinated Universal Time)
Saved by @hrhasnai #css #background #borders
<!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>
Comments