#bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } .navbar { background-color: #000000; border-color: 1px solid #000000; } .card-box { border-radius: 2.5rem; padding-bottom: 10px; margin-top:25px; background-color: #000000b0; box-shadow: 1px 1px 5px 1px grey; } .portfolio-item { /* height: 250px; */ text-align: center; } .row { margin: 0px; } h3 { margin: 10px; } .app_rstudio, .app_rstudio-super { margin-left: 15%; } .fa, .far, .fas, .fab { font-size: 96px; color: #55b0ff; margin: 15px; }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> <head lang="en"> <title th:text="${title}"></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" media="screen" th:href="@{${bootstrapCss}}" /> <link rel="stylesheet" media="screen" th:href="@{/css/default.css}"/> <script th:src="@{${jqueryJs}}"></script> <script th:src="@{${bootstrapJs}}"></script> </head> <body> <img src="https://i.ibb.co/2Ww4xTB/background.png" id="bg" alt=""> <div th:replace="../fragments/navbar :: navbar"></div> <div class="container" id="applist"> <div class="row" > <div th:each="app: ${apps}"> <div th:class="${'col-md-4 portfolio-item app_' + app.id}"> <div class="card-box"> <a th:href="@{/app/}+${app.id}"> <i th:class="${app.logoURL}"></i> </a> <h3> <a th:href="@{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a> </h3> <a th:if="${app.description != null}" th:href="@{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank"> <p th:text="${app.description}"></p> </a> </div> </div> </div> </div> </div> </body> </html>
In this case, the background will not fill the screen if the device you are using is portrait.
Try adding this to your style:
html { min-height:100%; }
1.4m articles
1.4m replys
5 comments
57.0k users
