A full width image is now a trend in the Web world, all the landing pages have a full-screen image, full-screen image creates a good impression on users. In this article, we will create a website banner with full screen image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Perfect Full Page Background Image</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet"> </head> <body> <div class="container"> <div class="contents"> <h1>SEO Tutorials</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores odit ratione </p> <div class="btns"> <a href="#" class="btn">Start now</a> </div> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; } .container { width: 100%; height: 100vh; background-image: url("https://www.mywebcode.com/wp-content/uploads/2018/09/freelace-web-developer-mywebcode-mumbai.jpg"); background-size: cover; background-repeat: no-repeat; background-color: rgb(0,0,0,.6); background-blend-mode: overlay; color: #fff; } .contents { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .contents h1 { font-family: Concert One; font-size: 60px; } .contents p { margin-top: 15px; } .btns { margin-top: 25px; } .btn { display: inline-block; padding: 15px 40px; text-decoration: none; text-align: center; background: #FF1493; font-size: 19px; color: #fff; border-radius: 30px; box-shadow: 0 0 30px rgba(0,0,0,0.5) } |