The navigation bar overlays the background images

I'm struggling to adjust the positioning of my image so that it doesn't get hidden underneath my navigation bar. I want my background image to stay fixed while text scrolls over it, but I can't seem to figure out the correct height for my images. I've experimented with changing margins and padding, but nothing seems to be effective.

.wrapper {
  height: 100%;
  line-height: 1.5;
  word-spacing: 4px;
 letter-spacing: 1px;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%; 
  width: 100%;
  color: white;
  text-align: center;
  display: table;

 }

.fixed-bg h1 {
  display: table-cell;
  vertical-align: middle;
  color: #993399;
  text-transform: capitalize;
  text-align: center;
  text-shadow: .1rem .1rem .1rem white;
 }

.scroll-bg {
  background-color: white;
  padding: 5px 70px;
  color: #676767;
}



.bg-1 {
  background-image:url(/Images/annual\ dinner1.jpg) ;

}


.bg-2 {
  background-image:url(/Images/donate\ today.jpg) ;
}





@media only screen and (max-device-width: 1366px) {
  .wrapper {
    background-attachment: scroll;
  }
}  

Answer №1

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background-image: url("https://images.unsplash.com/photo-1626011338327-2723a5268d7a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">hello</h1>
    <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, harum?</h3>
    <button>Submit</button>
  </div>
</div>


</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

My primary objective is to display or hide the icon based on the width of the right container and the rightButtonGroupWrapper. If the difference between these widths falls below 10, the icons should be shown, otherwise hidden. However, I'm facing an i ...

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

JavaScript button click changes the selected row's color in a DataTable

I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

Is there a way to make a picture fill the entire background?

Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...

Using `margin: auto;` alone will center a div horizontally, but it won't

My goal is to perfectly center the text within the anchors in my li container, both horizontally and vertically. I've come across a method that involves using text-align: center; on the container for horizontal alignment. However, vertical alignment r ...

Newcomers to Visual Studio Code facing a problem with images not displaying

As a beginner in all aspects, I am currently facing an issue with displaying an image on Visual Studio Code. The problem arose when I tried to create a separate folder for the image, which resulted in a cascade of subfolders that only made things worse eac ...

Difficulty arranging these elements in CSS

I'm attempting to achieve the following: (The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some text content) I'm trying to reach this outcome with the following CSS: @import url(/ ...

Resetting several sticky titles after displaying and hiding elements

Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code sni ...

Exploring the Terrain: Troubleshooting Meteor CSS with Twitter Bootstrap

Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

Deactivate Date Field for Editing Orders in WooCommerce

Is there a way to deactivate the Date Created textbox on the Edit Orders page of Woocommerce? I attempted to use pointer-events: none; but unfortunately, it did not have any effect. I am seeking a method to disable the Date Created field. https://i.sstat ...

Issue of delayed loading of CSS in Vue.js application

My vue PWA is experiencing slow loading of CSS when using Vue Bootstrap and Buefy. I attempted to use V cloak, but it only hides components milliseconds after the raw HTML is briefly displayed without any CSS applied. I am looking for a method to display ...

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...

The primary objective of utilizing margin

Just embarked on my journey to mastering HTML and CSS. Regarding the 'margin' property: Does its primary function revolve around centering elements horizontally on a webpage? I've crafted a navigation menu for a website, yet I struggle to ...

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

My current project involves Mui V5 and I am looking to customize the TreeView component. Specifically, I need to remove the collapse/expand icons as I want them to be integrated into the TreeItem label component on the left side instead of the right. Add ...

Scrolling horizontally through content of unspecified width

Imagine having a content div displaying a long line of text. I want this content to be enclosed within a wrapper div that has a fixed height and the ability to horizontally scroll if the content exceeds the width of the wrapper div. Here are two possible ...