Run ❯
Get your
own
website
Result Size:
625 x 565
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif} * {box-sizing: border-box;} .bg-img { /* The image used */ background-image: url("img_nature.jpg"); min-height: 380px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; /* Needed to position the navbar */ position: relative; } /* Position the navbar container inside the image */ .container { position: absolute; margin: 20px; width: auto; } /* The navbar */ .topnav { overflow: hidden; background-color: #333; } /* Navbar links */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } </style> </head> <body> <h2>Navbar on Image</h2> <div class="bg-img"> <div class="container"> <div class="topnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </div> </div> </body> </html>