ANTICHAT - Баг с градиентом

ANTICHAT (https://forum.antichat.xyz/index.php)

- Общие вопросы программирования (https://forum.antichat.xyz/forumdisplay.php?f=206)

- - Баг с градиентом (https://forum.antichat.xyz/showthread.php?t=1376056)

Хай,есть сайт - tools.mint-plantation.ru и в нем можно увидеть баг,когда пролистываешь вниз - градиент багается

Сам код:

HTML:

Код:



☰



Mint Tools



зачем...



Mint Plantation © 2021



Все права защищены.Любое копирование материала запрещено!



Любое копирование материала запрещено!

CSS:

Код:

body

{

background-image

:

linear-gradient

(

135deg

,

#EAD6EE

,

#A0F1EA

)

;

font-family

:

"Lato"

,

sans-serif

;

display

:

flex

;

flex-direction

:

column

;

height

:

-webkit-fill-available

;

}

html, body, #wrap

{

height

:

100%

;

}

body > #wrap

{

height

:

auto

;

min-height

:

100%

;

}

#main

{

transition

:

margin-left .5s

;

padding-bottom

:

150px

;

}

#particles-js

{

width

:

100%

;

height

:

100vh

;

position

:

fixed

;

top

:

0

;

left

:

0

;

z-index

:

-50

;

}

#footer

{

position

:

relative

;

margin-top

:

-150px

;

/* negative value of footer height */

height

:

150px

;

clear

:

both

;

}

/* CLEAR FIX*/

.clearfix:after

{

content

:

"."

;

display

:

block

;

height

:

0

;

clear

:

both

;

visibility

:

hidden

;

}

.clearfix

{

display

:

inline-block

;

}

/* Hides from IE-mac \*/

* html .clearfix

{

height

:

1%

;

}

.clearfix

{

display

:

block

;

}

/* End hide from IE-mac */

.footer .text

{

position

:

absolute

;

left

:

50%

;

margin-right

:

-50%

;

transform

:

translate

(

-50%

,

-50%

)

;

font-family

:

"Lato"

,

sans-serif

;

}

Как починить?

Как я понял речь идет об этом:

Цитата:

Сообщение от Спойлер

В обычном виде:

https://forum.antichat.xyz/attachments/27649163/

Если немного непонятно, увеличил:

https://forum.antichat.xyz/attachments/27649163/

Чтобы весь background-image двигался за пользователем (двигался вниз, так сказать ;d), нужно добавить к элементу body

Код:

background-attachment: fixed;

. Это означает что весь background-image не будет менять своего местоположения, отрывок с специализированного сайта (link):

Цитата:

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Надеюсь поможет, возможно я сказал что-то не правильно, другие могут поправить меня.