Background tamanho da janela
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'](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?
Discussão (2)
Carregando comentários...