Hey there, my web page is currently displaying like this:
However, as I scroll down, the background image of stars starts overlapping with the logo section, causing an issue. Here's how it looks when that happens:
This is the current CSS for the site header:
.site-header {
position: relative;
z-index: 1000;
/*background-attachment: fixed; */
}
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
height: 130px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
.site-header .site-title:hover {
text-decoration: underline;
}
.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 20px;
}
.site-description {
font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
margin: 0;
}
Furthermore, here's the current styling for the star image:
body.page-id-72 #stars {
background: #425169 url("../images/photos/stars.gif") top center;
width: 100%;
height: 8000px;
position: fixed;
top: 300px;
z-index: 100;
}
I'm looking to keep the site titles' background white like in the first image. Any assistance on resolving this issue would be greatly appreciated.