Can anyone help me out with a CSS issue I'm having? I've set an image as my background on a webpage and I want it to scroll with the page. Even though I followed some online tutorials, it's still not working for me. It's been a while since I worked with Html/CSS, so any assistance would be greatly appreciated. Thanks!
header.masthead::after {
content: "";
background-image: url(/assets/img/gradient-bg.jpg);
/* background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
<header class="masthead">
<div class="container">
<h1 id="mainH1" class="mastshead-subheading" style="color: white" ;>Find ideal <span
style="font-weight: 700;color: rgb(140,113,255);">mouse</span> for your hand</h1>
<h2 class="mastshead-subheading" style="font-weight: 700;color: rgb(140,113,255);"> Select your screen
<button type="button" class="btn btn-primary" style="font-weight: 700; font-size: 2rem;"
data-container="body" data-toggle="popover" data-placement="top" data-content="Diagonal should be written in info box on back side of your computer screen.
Google model of your monitor (written on back side of your computer screen).
Measure it with ruler (1 inch = 2.54 cm).">diagonal<sup> ?</sup></button> in inches
</h2>
<div class="text text-white"
style="display:inline-block;background:transparent;border:none;font-weight:600;font-size:1.15rem;margin:0;"
role="alert">
<u>Make sure that your browser zoom is set to 100%</u>
</div>
<div id="inches-wrapper">
<select id="inches" class="selectpicker" title="''" data-style="btn-warning" data-dropup-auto="false"
data-display="static" style="color:grey !important; font-size: 50px;">
</select>
<div id="manual-inches-wrapper">
<input id="manual-inches" placeholder="''" autocomplete="off">
<br>
<button class="btn btn-lg btn-dark" id="inches-confirm">OK</button>
<br>
<div class="alert" id=alert>Wrong input</div>
</div>
<!--
<div class="bubble" id="firstBubble">
<img class="bubble-img" src="assets/img/step1-2.png">
</div>
-->
</div>
<!-- js-scroll-trigger in js code-->
</div>
</header>