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

hyannzitz · Maio 13, 2015

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:

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;
}

André do Vale · Maio 13, 2015

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%; }
}

Entrar

Arquivado

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

Recommended Posts

hyannzitz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante