I am struggling to resize the background image on my website, similar to the one on this website. No matter what I try with the position or background-size property, the image remains too large and does not adjust properly. Additionally, I need the image to be visible through a transparent navigation bar that I have created. The content of the webpage should flow underneath the background image smoothly. As a newcomer to this platform, I am unsure how to provide an example image directly, but you can view where I attempted to insert it as HTML code.
Here is the code snippet:
/**********BODY GENERAL**********/
body {
margin: 0;
}
strong {
font-weight: bold;
}
/*******NAVIGATION*******/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items:center;
background: /*rgba(255, 51, 0, .95);*/ list-style-type: none; z-index: 10;
}
@media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%; grid-template-rows: auto; grid-gap: 1em;
}
}
/* Menu Styles */
/* Hover Animation */
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Website Title</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
...
...