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;
}
}