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.
After adding the thumbnail class to my thumbnails div, I noticed that some of the thumbnails were smaller in size than others. Wanting them all to have the same height, I decided to give each thumbnail a fixed height of 210px. However, this caused the sm ...
Query I encountered an issue while attempting to access a specific Django view through AJAX. This particular view redirects users if they haven't authorized the site with Google. I suspect the problem arises from redirecting "within" a view requested ...
When attempting a file upload operation using MV.Net, I encountered the GET http://localhost:55298/Home/test2.json 404 (Not Found) error while trying to upload a file. How can this issue be resolved? <input type="file" name="file" ...
When publishing a node module with source files in a src directory, users typically need to specify the full path from the module when importing a file into their project. For example: Directory Structure: my-module --src ----index.js ----something-else ...
During runtime, I receive an array similar to the example below: var colors = ['red', 'green', 'blue']; I then need to create a JSON String that looks like this: { "color" : { "name" : "foo", "properties ...
I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...
Check out my fiddle: DEMO creating a new Vue instance: { el: '#app', data: { modules: ['abc', 'def'] } } I am looking for a way to hide or show elements using v-if based on the values in an array called modules[]. ...
As I work on my portfolio website using only HTML 5 without any JavaScript, I encountered an issue with the about page not functioning properly on iPhones. There seems to be a problem with scrolling as some elements are fixed and do not move along with t ...
I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...
In the process of developing a firebug extension, I encountered an issue with displaying JSON in the panel. Despite using a textarea to display the panel, the extension consistently crashes. Here is what I attempted: var template = domplate( { ...
For our project, the automation team is incorporating a custom attribute called 'lid' to elements where unique identification is challenging. A new custom locator method has been developed to find elements using the 'lid' attribute: ...
d : {"children":[{"name":"China","children":[{"name":"China","value":400,"percentage":"33.33"}],"index":0},{"name":"England","children":[{"name":"England","value":300,"percentage":"33.33"}],"index":1},{"name":"Malaysia","children":[{"name":"Malaysia","val ...
I am currently using terrain view in Cesium Sandcastle and have loaded roads data in GeoJSON format as lines. I would like to clamp them on the terrain, similar to this example (select "Sample line positions and draw with depth test disabled" from drop-dow ...
Is it possible to use CSS to control line wraps? I would like to have lines with a similar amount of words per line, or at least avoid one-word lines. Original: A few words for a very long title that will probably span two lines Desired Outcome: A few ...
Lately, I've been working on implementing some code that will allow me to load example content from another website onto my own. However, I've run into an issue with encoding specifically related to the Polish language. The source site is using I ...
I am encountering an issue in my Angular 4 project where I receive two different arrays in response to a server request, and I want to utilize both of them in the template. Here is my controller code: this.contractService.getOwnerContract() .subscribe( ...
As I prepare to release an npm package on behalf of my organization, let's call it Organization A, I want our clients to have a means of verifying that the package they are using was indeed released by us. One method to accomplish this is by computing ...
One interesting feature of jQuery is how the variable $ can function as both an object and a function. // For example, you can access object properties like $.fn; // or $.isReady; // You can also call the function $ like this $(); So, how can we make the ...
I developed a PhoneGap mobile application with a few pre-defined "html pages" (I emphasized the quotes, as they are not traditional html files). Utilizing the onsen-ui framework allowed me to consolidate all of these "html" pages into ONE index.html file. ...
Can anyone help me figure out what I'm doing wrong here? Essentially, I am trying to open a PDF in Google Viewer: <a id="pdflink" href="https://docs.google.com/viewer?url=http://pdpdpd.pdf" target="_blank">Pdf</a> When it opens in the vi ...