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.

<!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>
	
	<center><img src="img/line.png"></center>
	
	<div id="textos">
	<div id="textoesquerdo">
	<h1 class="texto">PAISAGISMO</h1>
	<p class="texto">Além dos segmentos mais comuns como reformas residenciais, prediais e projetos, nós também trabalhamos e executamos projetos de paisagismo.
Realizamos manutenções de jardins mantendo-os sempre com um aspecto saudável e agradável, escolhendo espécifies corretas para cada ambiente, seja ele aberto ou fechado.
Se é para falar de paisagismo temos de falar de sustentabilidade e a CR6 consegue unir este dois pontos com maestria.</p>
		</div>
	
	<div id="textodireito">
	<h1 class="texto1">O QUE FAZEMOS</h2>
	<p class="texto1">Nós trabalhamos em diversos segmentos, dentre eles, projetos de arquitetura e interiores, reformas residenciais e comerciais, execução de projetos, acompanhamento de obras e outros mais.
Fornecemos um serviço de qualidade, com uma equipe experiente e capacitada para lhe atender da melhor forma possível.
Nós não somos apenas de uma empresa de arquitetura, nós investimos em inovação e atendimento diferenciado para garantir uma excelência no resultado final.</p>
	</div>
	</div>
	
	<div id="paisapro">
	</div>


				<center><img class="linharede" src="img/line.png"></center>

	<div id="redes">

		<div id="redecentro">
		<center><h1 class="redes">ESTAMOS CONECTADOS</h1></center>
		</div>
		
		<div id="redeesquerda">
		<a href="#"><img src="img/facebook.png"></a>
		</div>
		
		<div id="redemeio">
		<center><a href="#"><img src="img/twitter.png"></a></center>
		</div>
		
		<div id="rededireita">
		<a href="#"><img src="img/linkedin.png"></a>
		</div>
		
		<div id="rededireita2">
		<a href="#"><img src="img/insta.png"></a>
		</div>
	
	
	</div>
	
	<div id="rodape">
	</div>
	

	
	
	
	</body>

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

p.textomiddle {
	text-align:justify;
	text-justify: inter-word;
	position:relative;
	bottom:40px;
}

#textos {
	margin: 0 auto;
	padding: 0 auto;
	width:1050px;
	height:380px;
}

#textoesquerdo {
	float:left;
	width:450px;
	margin-left:5px;
}

#textodireito {
	float:right;
		width:450px;
		margin-right:5px;

}

h1.texto {
	font-size:3.0em;
	float:left;
}

p.texto {
	text-align:justify;
	float:left;
		position: relative;
	bottom:30px;
}

h1.texto1 {
	font-size:3.0em;
	float:right;
}

p.texto1 {
	text-align:justify;
	float:right;
	position: relative;
	bottom:30px;
}

#paisapro {
	background: url(img/paisapro.jpg) no-repeat;
	width:1040px;
	height:375px;
	margin: 0 auto;
	padding: 0 auto;
}
	
img.linharede {
	position:relative;
	top:50px;
}















#redes {width:1050px;height:380px; margin: 0 auto; position:relative;top:3.0em;}
#redecentro {
	width:1050px;
	height:120px;
}

h1.redes {
	font-size:4.0em;

}
	

#redeesquerda {
	height: 220px;
	width:220px;
	margin-top:30px;
	float:left;
}

#redemeio {
	height: 220px;
	width:220px;
	margin-top:30px;
	float:left;
	margin-left:42px;
}

#rededireita {
	height: 220px;
	width:220px;
	margin-top:30px;
	float:left;
	margin-left:85px;
}

#rededireita2 {
	height: 220px;
	width:220px;
	float:right;
	margin-top:30px;
}

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

Qual a solução para resolver? :(

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

Qual a solução para resolver? :(

Entrar

BACKGROUND NÃO FICA 100%

Pergunta

Douglas Mion

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades