Background não fica 100%

Douglas Mion · Novembro 29, 2017

Galera, boa tarde!
É a primeira vez que abro um tópico neste forum pois já cansei de tentar inúmeras coisas e não conseguir uma solução.

Estou 'programando' um site, entretanto, ele não é responsívo, somente se adapta a resolução dos celulares.

Só que eu to esbarrando em um ÚNICO problema, já tentei de tudo e não consigo resolver.

A imagem alí em cima não fica 100%, colada na tela.

Qual a solução para resolver? :(

Abaixo coloco um print do "erro" e o código, não vou por o código inteiro para não ficar um tópico grande.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="language" content="PT-BR">
<meta name="author" content="Douglas Mion">
<meta name="robots" content="index,follow,all">
<meta name="keywords" content="Menino do Rio, Roupas, Modas, Moda Masculina, Masculina, Camisetas, Fábrica">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link id="favicon" rel="shortcut icon" href="/img/favicon/1x/favicon.png" type="image/png" />
<link rel="stylesheet" id="style" href="	style.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700" rel="stylesheet">


<title>CR6 ARQUITETURA</title>



</head>

	<body>
	
		<div id="bgmain">
		
		
		
		
		
		<div id="barra">
			<div id="middlebanner">
				<div id="logo">
				<img class "logo" src="img/cr6logo.png">
				</div>
				
				<nav id="menu">
				<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">NOSSOS TRABALHOS</a></li>
				<li><a href="#">QUEM SOMOS</a></li>
				<li><a href="#">CONTATO</a></li>
				</ul>
				</nav>
			</div>
		</div>
		
		<div id="textomiddle">
		<center><h1>POLUDSDÇÃO COMPLETA EM ARQUITETURA</h1>
		
		<div id="botao">
		<a class="link" href="contato.html">FAÇA UM ORÇAMENTO</a>
		</div>
		
		</div>
		
		</div>
	
	<div id="meiomain">
	<div id="linha"><img src="img/line.png"></div>
	<center><h3>"Empresa de arquitetura focada em atender as demandas de seu projeto com toda a excelência e qualidade"</h3></center>
	<img src="img/line.png">
	</div>
	
	<div id="diferencial">
		<center><div id="dif1">
		<img src="img/garantia-icon.png">
		<h4>GARANTIA</H4>
		<p class="textomiddle">Nossa empresa oferece garantia de 5 anos para sua obra ou projeto, garantindo total satisfação do cliente e comprometimento da CR6.</p>
		</div>
		
		<div id="dif2">
		<img src="img/price-icon.png">
		<h4 class="teste">CUSTO</H4>
		<p class="textomiddle">Juntar a qualidade do nosso serviço com o baixo custo que oferecemos é com certeza a melhor opção para você economizar em sua obra/projeto.</p>
		</div>
		
		<div id="dif3">
		<img src="img/equipe-icon.png">
		<h4>EQUIPE</H4>
		<p class="textomiddle">Arquitetos experientes e focados em sempre proporcionar ao cliente final um serviço de excelência e de exímia qualidade.</p>
		</div></center>
	</div>

body {
margin: 0 auto;
padding: 0 auto;
font-family: 'Noto Sans', sans-serif;
}


h1 {
	font-size: 5.0em;
	color:#efc500;
}

h3 {
	font-size:2.5em;
	color:#000000;
	font-weight:normal;
	font-style:italic;
}

h4 {
	font-size:1.5em;
	color:#000000;
	font-weight:normal;
	position:relative;
	bottom:25px;
}

#bgmain {
background: url(img/main.jpg) no-repeat;
background-color:#efc500;
background-position: center center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
margin: 0 auto;
padding: 0 auto;
width:100%;
height:100%;
}

#barra {
height:130px;
width:100%;
background-color:white;
opacity: 0.8;
filter: alpha(opacity=80%);
}

#logo {
float:left;
margin-left:5px;
}

#menu ul {
    margin:0px auto;
	margin-top:50px;
    list-style:none;
	float: right;
	margin-right:5px;
}

#menu ul li { display: inline; }

#menu ul li a {
	font-size:18px;
	color:#efc500;
	font-weight:bold;
	margin-left: 30px;
    text-decoration: none;
}

#menu ul li a:hover {border-bottom:6px solid #efc500;}

#textomiddle {
	width:1050px;
	margin: 0 auto;
	margin-top:150px;
}

#botao {
	width:350px;
	height:70px;
	display:inline-block;
	margin-bottom:30px;
	background-color:#FFFFFF;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	opacity: 0.8;
filter: alpha(opacity=80%);
}

#botao:hover {
	background-color:#FFFFFF;
		opacity: 1;
filter: alpha(opacity=100%);
}

a.link {
	text-decoration:none;
	display: inline-block;
	color:#efc500;
	font-family: 'Noto Sans', sans-serif;
	margin-top:17px;
	font-size: 25px;
}




#meiomain {
	width:1050px;
	margin: 0 auto;
}


#linha {
	margin-top:20px;
}

#diferencial {
	width:1050px;
	height:300px;
	margin: 0 auto;
}

#dif1 {
	width:300px;
	float:left;
	margin-top:30px;
	margin-left:5px;
}

#dif2 {
	width:300px;
	margin-left:70px;
	float:left;
	margin-top:30px;
}

#dif3 {
	width:300px;
	float:right;
	margin-top:30px;
	margin-right:5px;
}