Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a navigation menu on an image with CSS?
Adding a navigation menu on an image creates an attractive overlay effect for websites. This technique combines CSS background properties with navigation styling to place menu items directly over a background image.
Syntax
.container {
background: url('image-path');
background-size: cover;
background-position: center;
}
nav {
/* Navigation styles */
}
Set the Style for the Document's Body
First, reset the default margin and padding for the document's body −
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
Create the Navigation Menu Structure
Place the navigation links inside a <nav> element within a container div −
<div class="image-nav">
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</div>
Apply Background Image
Use the background property to set the image and configure its display properties −
.image-nav {
background: url('/market/public/assets/images/business-top-banner.svg');
min-height: 400px;
padding: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70%;
}
Style the Navigation Menu
Configure the navigation container with appropriate styling −
nav {
width: 80%;
background-color: rgb(23, 104, 43);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(129, 123, 123);
}
.selected {
background-color: rgb(0, 56, 42);
}
Complete Example
Here's the complete code to add a navigation menu on an image using CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial, sans-serif;
}
.image-nav {
background: url('/market/public/assets/images/business-top-banner.svg');
min-height: 400px;
padding: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70%;
margin: 0 auto;
}
nav {
width: 80%;
background-color: rgb(23, 104, 43);
overflow: auto;
height: auto;
border-radius: 8px;
}
.links {
display: inline-block;
text-align: center;
padding: 14px 16px;
color: white;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.links:hover {
background-color: rgb(129, 123, 123);
}
.selected {
background-color: rgb(0, 56, 42);
}
</style>
</head>
<body>
<div class="image-nav">
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</div>
</body>
</html>
A navigation menu with green background appears over a business-themed background image. The menu contains five links: Home (selected/darker), Login, Register, Contact Us, and More Info. The links change color when hovered.
Conclusion
Creating a navigation menu on an image involves setting a background image on a container and styling the navigation elements with appropriate colors and positioning. This technique creates visually appealing headers for websites.
2K+ Views
