html background custom color not cover the whole page
Question
I am trying to have this custom color cover the whole page but it's only covering part of it. I have the same issues with other pages which has a similar layout. I know that I need to move my styling to a CSS file but for now, I am just testing things out. I looked at other solutions but have not found the one that helped me yet. maybe cause I am using thymeleaf, not sure!!!!
**and here is my HTML code **
<!DOCTYPE html>
<html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>VoiceIt App</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.navbar {
background-color: black;
}
#multi-color-bg {
width: 100%;
height: 400px;
background-image: url(firefox.png),
url(bubbles.png),
linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208));
background-repeat: no-repeat,
no-repeat,
no-repeat;
background-position: bottom right,
left,
right;
}
</style>
<body id="multi-color-bg">
<!-- create navigation bar ( header) -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" th:href="@{/register}">Registration and
Login</a>
</div>
</div>
</nav>
<br><br><br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>User Login Page</h1>
<form th:action="@{/login}" method="post">
<!-- error message -->
<div th:if="${param.error}">
<div class="alert alert-danger">Invalid username or
password.</div>
</div>
<!-- logout message -->
<div th:if="${param.logout}">
<div class="alert alert-info">You have been logged out.</div>
</div>
<div class="form-group">
<label for="username"> Username </label> : <input type="text"
class="form-control" id="username" name="username"
placeholder="Enter Email ID" autofocus="autofocus">
</div>
<div class="form-group">
<label for="password">Password</label>: <input type="password"
id="password" name="password" class="form-control"
placeholder="Enter Password" />
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit"
class="form-control btn btn-primary" value="Log In" />
</div>
</div>
</div>
</form>
<div class="form-group">
<span>New user? <a href="/" th:href="@{/register}">Register
here</a></span>
</div>
</div>
</div>
</div>
</body>
</html>
5 answers
solution1
1 ACCPTED 2022-06-08 01:54:53
you can try to set the height 100% and css html { height: 100% }
html, body{
height: 100%;
}
solution2
1 2022-06-08 05:24:28
In this case, you will need to adjust the height of the body tag given in the custom #multi-color-bg id rules that you added to your HTML. Adding a 100% to it will do the trick, although I'd recommend to use a separated div as a wrapper for all the content of the body and leave the body apart with only the rule of 100vh to the body tag. This is of course optional, just an extra suggestion, pal.
.navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100%; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } <!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>
solution3
0 2022-06-08 02:13:47
Setting height to 100% is still not working try to set height to 100vh. And if it still not work add margin-top of required pixel. I hope this solved the problem.
solution4
0 2022-06-08 05:29:52
In this case, you will need to adjust the height of the body tag given in the custom #multi-color-bg id rules that you added to your HTML. Adding a 100vh to it will do the trick, although I'd recommend to use a separated div as a wrapper for all the content of the body and leave the body apart with only the rule of 100vh to the body tag. This is of course optional, just an extra suggestion, pal.
.navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100vh !important; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; }
<!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>
solution5
0 2022-06-08 05:33:30
actually the height of body is not full page and the background is applied on body. so you should keep body at least 100vh high
body{
min-height: 100vh;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Background color is not full, it does not cover the whole page properly
Background color in HTML is not applied to the whole page
Applying background color to to whole html page
HTML Background color not filling whole page?
Getting Background Color to cover the whole area of a website
Setting SVG color in CSS to cover the whole background
JQuery background video does not cover whole the page
background-image: always cover whole page
How to get background image to cover the whole page
Background-size: cover; doesn't cover the whole page
Related Tags