Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

hyannzitz

Background nao fica na tela toda para celular ou tablet..

Por , em Desenvolvimento frontend

Recommended Posts

hyannzitz    0

hyannzitz
Postado

Bom dia pessoal,

Ja tive a ajuda aqui no forum pois a imagem do background nao estava ficando na tela inteira..Depois de resolvido, fui testar no tablet e no celular e ficava assim:

baINDL8.jpg

Como faço pra que a imagem de fundo fique na tela toda, tambem para celulares e tables? Segue o codigo do pagina:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>TITULO TITULO</title>
    <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <!--<link rel="shortcut icon" href="favicon.png" />-->

</head>

<body topmargin="0" scroll="auto" bgcolor="#FFFFFF">
<div class="container col-md-12 col-xs-12 col-sm-12 text-center">
    <div class="name">
        <p>NOME NOME NOME NOME</p>
    </div>
    <div class="description">
        <p>TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</p>
    </div>
    <div class="email-container">
        <div class="email-content">
            <p>EMAILEMAIL@gmail.com</p>
        </div>
        <div class="email-img">
            <img src="gmail.png" class="gmail-icon">
        </div>
    </div>
</div>
</body>

</html>

CSS:

body{
    background:url(index.jpg) no-repeat;
    width:100%;
    max-width:2000px;
    margin: 0px;
    background-size: cover;
    text-align: center;
}
.container {
    font-family: 'Quicksand', sans-serif;
    position:absolute;
    top:50%;
    margin-top:-200px;
}
.name {
}
.name p{
    font-size: 100px;
}
.description {
    margin-bottom: 35px;
}
.description p{
    font-size: 48px;
}
.email-container {
    display: inline-block;
    height: 60px;
}
.email-container p{
    font-size: 48px;
}
.email-img{
    float: right;
}
.email-img img{
    width: 60px;
    height: 60px;
}
.email-content{
    float:right;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Estranho. Se a imagem for só a parte da metade superior, ela está se comportando erroneamente. Mas, pelo seu código, está certo, sendo 'cover'. Provavelmente, seu body não está assumindo a altura necessária.

 

Tente um fallback assim:

@media screen and (max-width: 768px) and (orientation: portrait) {
  html, body { min-height: 100%; }
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito