Ir para conteúdo

Arquivado

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

Douglas Mion

Background não fica 100%

Recommended Posts

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

 

3b9cf42b-b9f3-447a-92c4-1569f5fd08ff.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por jacquesvaladares
      Como inserir uma imagem como background em uma célula de tabela. Fiz um exemplo simples q apresento abaixo.
       
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
        <meta http-equiv="content-type"
       content="text/html; charset=ISO-8859-1">
        <title>Teste de imagem na celula da tabela</title>
      <!--&#8211; I N I C I O C S S &#8211;-->
        <style type="" text/css="">
      .imagem{
      background: url(liz.png) no repeat;
      }
        </style><!--&#8211; F I M C S S &#8211;-->
      </head>
      <body>
      <table
       style="width: 100%; height: 450px; text-align: left; margin-left: auto; margin-right: auto;"
       border="2" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="height: 50%; width: 50%;"><class
       ="imagem"></class></td>
            <td
       style="height: 50%; width: 50%; background-color: rgb(255, 255, 204);"></td>
          </tr>
          <tr>
            <td
       style="height: 50%; width: 50%; background-color: rgb(51, 102, 255);"></td>
            <td
       style="height: 50%; width: 50%; background-color: rgb(51, 255, 51);"></td>
          </tr>
        </tbody>
      </table>
      <br>
      </body>
      </html>
       

    • Por AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
    • Por lucazbrandao
      Olá comunidade, 
       
      No site que estou desenvolvendo eu criei um background com 3 imagens, top, bottom e center, ambas tem 1920 de largura.
      Meu código:
      body { width: 100%; background: url(../images/top-fon-bg.jpg) top center no-repeat, url(../images/bottom-fon-bg.jpg) bottom center no-repeat, url(../images/fon-repeat.jpg) center repeat-y; background-color: #000000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #7d7d7d; line-height: 1; min-height: 100vh; } O problema é que a imagem do centro não fica centralizada, parece que ela se move 1 pixel pro lado.
       
       
       
      Alguém sabe o que pode ser? Obrigado.

    • Por Carlos Web Soluções Web
      Como expandir Multi-Level Menu para 100% ??

      Olá....como vão ??

      Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !!
      O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !!
       
      Link = CSS Multi-Level Menu

      Alguém por favor poderia me dar uma ajuda ??
      Desde já obrigado
      Carlos
    • Por nilo7004b
      Ola pessoal, sou novo aqui no fórum e desculpem qualquer erro, já procurei bastante pelo meu problema e não consegui encontrar nada a respeito. O meu problema é que eu estou desenvolvendo uma pagina web e após definir o background como um gradiente e adicionar divs aparecem umas manchas brancas pela pagina que vão alterando de posição a medida em que vai fazendo scroll na pagina, na imagem anexada tem o exemplo, gostaria de saber qual a origem do problema e como resolver. Desde já agradeço pela ajuda.
      Obs.: as DIVs adicionadas não estão com a cor de background definida.
       




×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.