Ir para conteúdo

Arquivado

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

hyannzitz

Background tamanho da janela

Por , em Desenvolvimento frontend

Recommended Posts

hyannzitz    0

hyannzitz
Postado

Entao galera, eu to tentando criar uma pagina basica com bootstrap e a imagem de background nao ta ficando na tela toda..sendo que a imagem tem 2000 x 1080 e a resoluçao da minha tela é menor, entao teoricamente teria que ocupar a janela inteira

Segue o index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>TITULO BOLADAO</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 COMPLETO</p>
    </div>
    <div class="description">
        <p>OLÁ, MEU NOME É BLA BLA BLA BLA BLA BLA BLA</p>
    </div>
    <div class="email-container">
        <div class="email-content">
            <p>email@gmail.com</p>
        </div>
        <div class="email-img">
            <img src="gmail.png" class="gmail-icon">
        </div>
    </div>
</div>
</body>

</html>

o css:

body{
    background:url(index.jpg) no-repeat center center;
    width:100%;
    margin: 0px;
    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;
}

podem me ajudar?

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