Функция прокрутки фонового изображения не работает

#html #css #position #background-image

#HTML #css #положение #фоновое изображение

Вопрос:

Это может показаться глупым, но у меня есть фон в виде изображения в Интернете, и я хочу, чтобы он прокручивался с прокруткой страницы. Я посмотрел в Интернете, как это делается, и это все еще не работает для меня, даже если я, по крайней мере, надеюсь, что я все понял правильно. Я давно не работал с Html / CSS, поэтому был бы признателен за любую помощь. Большое спасибо.

 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>

1. Также опубликуйте свой html

2. Я не создавал эту страницу, я просто помогаю другу с этим, и в коде какой-то беспорядок. Извините

3. Что означает «я хочу, чтобы он прокручивался с прокруткой страницы»?

4. В принципе, если я прокручиваю мышью, фон также будет перемещаться и не будет оставаться на одном месте.

Ответ №1:

Если вы переместите изображение в отдельное погружение, оно будет работать.

 <header>....</header>
<div class="background-image"></div>

header{
  height:200vh;
}

.background-image {
  content: "";
   background-image: url(https://m.media-amazon.com/images/M/MV5BZTI2YTlhMWMtNWY1Mi00NGQ3LWFkMjEtZjI3NmUzYjI1NWFmXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg); 
/* background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);*/
  background-repeat: no-repeat;
  background-position: right top;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
}

Я установил высоту заголовка равной 2 * viewhieght, чтобы была необходима полоса прокрутки.

https://codepen.io/shaniemoonlight/pen/WNoQOXj