Issue
I'm trying to set a linear gradient color as background of my HTML page, but when I apply the CSS style instead to stretch to the all page it repeat as you can see in the picture below.
How can I solve this issue and why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test BootStrap</title>
<link rel="stylesheet" href="index.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body class="body-page">
Hello
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
.body-page{
background-image: linear-gradient(blue,red);
}
Solution
You just need to add background-repeat: no-repeat;
and background-attachment: fixed;
:
.body-page {
background-image: linear-gradient(blue, red);
background-repeat: no-repeat;
background-attachment: fixed;
}
<body class="body-page">
Hello
</body>
Answered By - Damzaky
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.