Градиентный фон повторяется, несмотря на то, что при прокрутке нет повтора
Я пробовал искать здесь ответы, но ни один из предложенных на другие вопросы у меня не работал.
Мой код для фона:
body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-repeat: no-repeat scroll;
background-size: cover;
color: #f4f4f4;
text-align: center;
}
Я также установил высоту своего HTML на 100%. Я даже пробовал ширину, но это тоже ничего не дало.
Когда я запускаю это, в моем браузере он выглядит так: Здесь это повторяется, когда я прокручиваю страницу вниз.
Есть что-нибудь, что сработало для кого-нибудь из вас, ребята?
Ответы 3
Вы можете использовать указанный ниже код
body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-size:100% 100vh;
color: #f4f4f4;
text-align: center;
}
Так что он работает так, как вам нужно
Просто добавьте height или 100% для тегов html и body. И тебе хорошо идти.
html, body {
height: 100%;
}
Я попросил своего учителя о помощи во время моего урока, и они посоветовали мне установить привязку фона к фиксированной, и это сработало! Теперь фон растягивается по странице и не повторяется.
body {
background-attachment: fixed;
}
Спасибо всем за ответ!
Спасибо! К сожалению, это ничего не изменило. Я думаю, что это на мне, поскольку я не понял в своем вопросе, что именно я хотел, чтобы сделать мой фон. Я попросил своего учителя о помощи, и он сказал мне установить привязку фона к фиксированной! Я ценю вашу помощь. Еще раз спасибо !! : D