Here is a visual representation of my design for better understanding:
I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see any difference from the original image. There is a possibility that they are being displayed below or behind the image despite my attempts to adjust the z-indexes.
Any assistance in resolving this issue would be highly valued. Thank you.
If you're referring to the div containing the map in your initial image, then you should include something similar to this structure in your html:
<div id='banner'>
<img src='...'>
</div>
<div id='floating'>
<div id='floatContent'></div>
</div>
Next, in your css file, consider implementing the following styles:
.banner {
position: fixed;
width: 100%;
}
.floating {
position: absolute;
margin: auto;
}
You have the option to utilize an image as a background and incorporate absolutely positioned content div that hovers over the background. Additionally, you can set a semi-transparent background to .content
html, body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#Page {
position: relative;
padding-top: 100px;
background: url('http://lorempixel.com/output/food-q-c-640-480-1.jpg') no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
#wrapper {
width: 1280;
height: 100%;
}
#home-bg {
position: fixed;
height: 100%;
width: 100%;
opacity: 0.8;
z-index: -1;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 100px;
transition: all 0.8s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
margin: auto;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
.content {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
transform: translate(-50%, -50%);
background: rgba(180,255,180, 0.5);
border: 2px solid green;
color: red;
}<body id="chesters">
<header>
<nav>
<ul>
<li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li>
<li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li>
<li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
<li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li>
<li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li>
</ul>
</nav>
</header>
<div id="Page">
<div id="wrapper">
<div class="content">Lorem ipsum dolor amet
</div>
</div>
</div> <!-- Page -->
</body>Although I can't directly modify the provided code, I do have some advice on how to achieve your desired outcome. First, you should incorporate the background image using CSS. Then, insert the desired div element within the header section following the navigation items. Finally, apply CSS positioning techniques to align it with the background image.
<header>
<nav>
<ul>
<li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li>
<li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li>
<li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
<li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li>
<li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li>
</ul>
</nav>
<div id="wrapper">
</div>
</header>
CSS:
header {
background-image: url(img/your-img.jpg);
background-size: cover;
background-position: center;
height: 100vh; /* or any other preferred value */
background-attachment: fixed;
position: relative;
}
.wrapper {
position: absolute;
width: 1140px; /* adjust based on your requirements */
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
http://codepen.io/anon/pen/ggQJpX
I hope this guidance helps you achieve what you're aiming for.
I have integrated a stocks chart from HighStocks with gridster, where each gridster block is draggable. However, the stocks time slider gadget can also be dragged and resized. When I move the slider on top of a gridster widget, the entire widget moves alon ...
Struggling to figure this out, need some help I have a todo list with flag and trash buttons. When I add the first item, it shows up on the list without refreshing the page. However, when I try to add a second item, the page reloads but the item doesn&apo ...
HTML Template: <form method="post" action="" enctype="multipart/form-data" class="form-group"> {% csrf_token %} <h1 class="m-3 text-center">New Post</h1> <div id="tui-image-e ...
When working in my controller, I encountered a situation where I needed to call a factory function recursively. Previously, the code worked fine as simple JavaScript functions not defined within the factory itself, but I wanted to improve isolation. Here ...
While browsing the site, I couldn't find a solution to my issue, but I stumbled upon an open bug on Github. The only workaround mentioned at the moment is to utilize GatsbyImage. As I delve into converting a Gatsby project from version 2 to 3, I have ...
I am attempting to achieve a text effect where the text fades in, stays visible for a moment, and then fades out. While I understand this can be done with CSS Keyframes, I am unsure of how to implement it with multiple animations. As a result, I am experi ...
Although I have been learning HTML, CSS and jQuery, one area that always trips me up is selectors. Currently struggling with redundant selectors. I am attempting to customize the ul and li elements after collapsing the li, however, the selector doesn&apos ...
Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...
Can I view custom methods in the IE developer toolbar's watch window? For example, if I have a global function named hello, can I locate it within the DOM? function hello() { alert("hello"); } If so, where in the watch window would I find them? ...
Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...
Having some trouble with this task. Here is what I've managed to put together so far: <input id="newFile" type="file"/> <span style="background-color:orange;" onClick="newImage()">HEYTRY</span> I know it's not much progress. ...
I have encountered an issue while developing a website. I am trying to create a hierarchical list with multiple levels, but it seems that such feature does not exist (unless you know otherwise). As a workaround, I have implemented a system using invisible ...
Does anyone know of a jquery slider script that allows for horizontal sliding when moving the mouse? I am looking to achieve an effect similar to the one shown in this example, but specifically scrolling from right to left. ...
I have been trying to achieve my initial goal of retrieving data from the API I am using on the backend, inserting that data into my database, and then sending that data through res.json so it can be accessed on the frontend via fetch. Despite all my attem ...
I have implemented a drop-down menu that triggers an event handler to return the selected option when it is clicked. Upon clicking on an option, I retrieve the inner text of that option using the event. The code snippet looks like this: event.target.inner ...
Within my HTML template, there is an input element that I am loading via an Ajax call and inserting into existing HTML using jQuery's $(selector).html(response). This input element is part of a pop-up box that loads from the template. I want to set f ...
Does anyone know of a reliable solution or Jquery plugin that can provide location details based on latitude and longitude coordinates? I heard about the Google Reverse Location API but hoping for a pre-made option. I'm not sure if there are any free ...
As someone who is just starting out in coding, I could really use some help. Currently, I am using node.js to fetch tweet text and displaying it using html. I would like to add a hyperlink for the URLs within the text. For example: #Times #News Ukrainians ...
I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...
After creating an SVG image, I encountered a problem when trying to display it on a webpage. Even with the width value set to 100%, the image did not stretch all the way to the edges of the page, leaving small gaps at the edges. I attempted to switch the ...