0
I have a login screen:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="context" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<title>Sistema de Ouvidoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta http-equiv="refresh" content="3600;url=/ouvidoria" />
<link rel="stylesheet" href="${context}/resources/css/modal.css" />
<link rel="stylesheet" href="${context}/resources/css/estilo.css" />
<link rel="stylesheet" href="${context}/resources/css/estiloGoogle.css" />
<script src="${context}/resources/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get("/ouvidoria/aviso", function(data) {
if(data.titulo) {
$("#avisoTitulo").append(data.titulo);
$("#avisoConteudo").append(data.conteudo);
$(".modal").show();
}
}, "json" );
})
</script>
</head>
<body>
<div class="global">
<div class="bgSistemaOuvidoria">
<!-- conteúdo Login -->
<form method="post" action="${context}/login">
<div class="conteudo">
<div class="logo-externa">
<img src="${context}/img/logo-ouvidoria.png" />
</div>
<div class="combo-login">
<div class="topoLoginBox"></div>
<div class="conteudoLogin">
<div class="mensagem">
<ul>
<c:forEach var="error" items="${errors}">
<li>
<c:out value="${error}" />
</li>
</c:forEach>
<c:choose>
<c:when test="${param.logout == 'expired'}">
<li>Sessão Expirada</li>
</c:when>
</c:choose>
</ul>
</div>
<div class="panelLogin">
<div class="panelLoginConteudo">
<div class="alingBox">
<div class="loginBox">
<label for="username" style="font-family: 'Open Sans'; font-size: 14px">Login:</label>
<br />
<input type="text" name="username" style="font-family: sans-serif; font-size: 12px" size="24" />
</div>
<div class="loginBoxPw">
<label for="password" style="font-family: 'Open Sans'; font-size: 14px">Senha:</label>
<br />
<input type="password" name="password" style="font-family: sans-serif; font-size: 12px" size="24" />
</div>
</div>
<div class="alingButton">
<div class="rSenha">
<a href="${context}/recuperarsenha.xhtml">Recuperar Senha</a>
</div>
<div class="dadosCadastro1">
<button type="submit" style="border: none;"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-text">ACESSAR</span>
</button>
</div>
</div>
<div class="cadastroUsuariosOuvidoria">
Não é cadastrado?
<a href="${context}/pages/externo/cadastrarManifestante.xhtml">Cadastre-se</a>
</div>
</div>
</div>
</div>
<div class="dadosCadastro2">
<div class="notch"></div>
<div class="botaoCadastro">
<img src="${context}/img/addManifestacao.png" />
<a href="${context}/pages/manifestacao/cadastrar.xhtml">Cadastrar Manifestação</a>
</div>
<br />
<p>
À Ouvidoria compete receber, examinar e encaminhar as
reclamações, sugestões, elogios, denúncias e solicitação de
informações, especialmente aquelas que demandam maior urgência.
</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal" id="avisoModal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="$('.modal').hide();"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="avisoTitulo"></h4>
</div>
<div class="modal-body"><div id="avisoConteudo"></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="$('.modal').hide();">Fechar</button>
</div>
</div>
</div>
</body>
</html>
I’m having a problem that the screen keeps the background only in the area of the screen, if the scrollbar appears, the background is only in the area of the original presentation, when scrolling the bar the background of the revealed area turns white, and I would like to keep the background even in these areas.
I think the whole css responsible for that page is there:
img {
border: 0;
}
root {
display: block;
}
html,body {
margin: 0;
padding: 0;
}
#bGroundPrincipal {
background: url("../img/header_image_bg.png");
background-repeat: no-repeat;
height: auto;
width: auto;
position: relative;
top: 30px;
z-index: 0;
}
.global {
background: url("../img/blue_pattern.gif");
background-color: #CACACA;
overflow: hidden;
height: 100%;
width: 100%;
}
@media screen and (min-width: 980px) {
.conteudo {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-self: center;
height: 458px;
width: 980px;
}
.combo-login {
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
float: right;
}
.logo-externa {
height: 142px;
margin: 0 auto;
width: 980px;
}
.logo-externa > img {
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
float: left;
}
}
@media screen and (max-width: 980px) {
.conteudo {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-self: center;
height: 100%;
width: 380px;
}
.combo-login {
position: absolute;
top: 350px;
left: 50%;
transform: translate(-50%, -50%);
float: right;
padding-top: 40%;
}
.logo-externa {
height: 142px;
margin: 0 auto;
width: 100%;
}
.logo-externa > img {
position: absolute;
height: 169px;
width: 250px;
top: 100px;
left: 50%;
transform: translate(-50%, -50%);
float: left;
}
}
.bgSistemaOuvidoria {
background-repeat: no-repeat;
background-position: 50% 0%;
height: auto;
height: 100vh;
width: 100%;
}
Ever tried to use
background-size:cover?– I_like_trains
@I_like_trains had not tried, but I tested here now, and some other variations I found on the net, but none solved
– Mateus
background-attachment: localorbackground-attachment: fixedand try this now– I_like_trains
No solved, it’s strange the problem is when the view is smaller than the div of the login panel, then the scroll appears and what is outside the view does not take the background
– Mateus
I’m thinking of making one
@media screen and (max-width: 380px)with an alternative configuration– Mateus