Is there a way to make the background image scroll along with the rest of the page? I tried using background-attachment: scroll; but it did not work as expected. Initially, the background image and logo are positioned correctly, but when the page is scrolled, the logo and title move while the navbar and background image do not.
.content {
overflow: auto;
position: relative;
}
.content:before {
content: "";
position: fixed;
left: 0;
right: 0;
top:-175px;
z-index: -1;
display: block;
background-image: url("/assets/backgroundpic.jpg");
background-size:cover;
background-position:center top;
width: 100%;
height: 500px;
}
<div class="container content text-center" style="position:relative;">
<%= image_tag("/assets/logo-seal.png", size: "250x250", class: "img-responsive img-circle margin", style: "display:inline;margin-top:200px;") %>
<h1 style="font: 48px Oswald, sans-serif;">TITLE</h1>
</div>