Ir para conteúdo

POWERED BY:

Arquivado

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

gfsouza86

Colocar imagem e Redimensionar

Por , em Desenvolvimento frontend

Recommended Posts

gfsouza86    0

gfsouza86
Postado

Fala galera tudo na paz?

 

Olhando esse tutorial http://chocoladesign.com/ancora-html eu consigo chegar nesse resultado http://chocoladesign.com/wp-content/uploads/2012/07/ancora.html

 

Tenho duas duvidas com respeito a um site assim:

 

1ª Como colocar imagens no fundo do site ao invés de deixar apenas as cores?

 

2ª Como redimensionar para o site abrir em diversos tamanhos de resolução?

 

Desde já agradeço

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Olá! Então, usando CSS, tente:

body{
  background: url('CAMINHO DA IMAGEM');
  width:100%;
}

Tente assim...

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Então seria uma div com uma imagem, redimensionada... Você gostaria de saber como se "Faz" isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Você precisará estudar um pouco sobre design responsivo e media queries.

é interessante você entender como funciona antes de ir tc código.

Estudando essas duas coisas ai você vai conseguir ter uma visão melhor sobre o assunto, boa sorte! :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

gfsouza86    0

gfsouza86
Postado

Então seria uma div com uma imagem, redimensionada... Você gostaria de saber como se "Faz" isso?

 

Gostaria de saber como coloco uma imagem ou mais imagens iguais as do exemplo que eu postei.

 

 

Você precisará estudar um pouco sobre design responsivo e media queries.

é interessante você entender como funciona antes de ir tc código.

Estudando essas duas coisas ai você vai conseguir ter uma visão melhor sobre o assunto, boa sorte! :)

 

O design responsivo é para dimensionar de acordo com a resolução da tela né?

E o media queries serve para que?

 

Achei um exemplo muito bom do que eu quero

 

http://www.baruk.com.br/site/content/index.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Então... Para você fazer um Design Responsivo (Seu site se adaptar em todos os dispositivos), é necessario usar Media Queries. Mas como é uma imagem que quer trabalhar você pode trabalhar com porcentagem. Tente assim:

<style>
#fundo_div{
  width:100%;
  max-width:100%;
  background: url('Caminho da URL');
}

</style>

<div id="fundo_div"></div>

Tente assim...

Compartilhar este post

Link para o post
Compartilhar em outros sites

gfsouza86    0

gfsouza86
Postado

Desculpe minha ignorancia, mas não consegui fazer funcionar.

Meu código esta assim:

<!DOCTYPE html>

<head>

<title>ANCORAGEM</title>



	<style type="text/css">
	
	body {
	font-family: Verdana;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #333;
	background:  #000;
	min-width: 940px;


	}
	
	#menu{
	font-family: Impact, "Arial Black", sans-serif;
	color: #696969;
	text-transform: uppercase;
	font-size: 20px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000000;
	padding: 10px;
	padding: .5rem;
	margin: 0 0 0px 0;
	
	}
	
	#home {
	height: 800px;
	width: 100%;
	background-color: #1E90FF;
	}
	
	#quemsou {
	padding-top:0px;
	height: 700px;
	width: 100%;
	background-color: #1C86EE;
	}
	
	#contato {
	height:915px;
	width:100%;
	padding-top:0px;
	background: #5F9EA0;
	}

	#creditos {
	height:400px;
	width:100%;
	padding-top:0px;
	background: #FFF;
	text-color: #000;
	}

	
	a:link, a:visited {
	color:#696969;
	text-decoration: none;
	}

	a:hover {
	color: #CD5C5C;
	text-decoration: none;
	
	}
	
	#Titulo{
	font-size: 100px;
	text-align: center;
	padding-top: 20px;
	}
	
	</style>
	
	  


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 300);
           return false;
         });
      }
    }
  });
});
// ]]></script>


</head>
<body>

<div id=menu>
<a href="#home" >Home</span></a>
<a href="#quemsou">Quem sou</span></a>
<a href="#contato">Contato</span></a>
<a href="#creditos">Créditos</span></a>
</div>

<div id="home">
<div id="Titulo">OI! =D</div>
SEJA MUITO BEM VINDO À PÁGINA TESTE. </br> FEITA PARA FINS DIDÁTICOS.</br>
FOI UTILIZADO O RECURSO DE ANCORAGEM E jQuery.

</div>

<div id="quemsou">
<div id="Titulo">QUEM SOU</div>
OS SEUS TRABALHOS ENTRAM AQUI!</br>SERIA INTERESSANTE MOSTRÁ-LOS DE UMA FORMA ORGANIZADA.</br>
<a href="#home" >voltar ao topo</span></a>
</div>

<div id="contato">
<div id="Titulo">CONTATO</div>
ENTRE EM CONTATO.</br> QUE TAL UM FORMULÁRIO E OS LINKS PARA AS REDES SOCIAIS? </br>
<a href="#home" >voltar ao topo</span></a>
</div>

<div id="creditos">
<div id="Titulo">CRÉDITOS</div>
Tutorial por <a href="http://twitter.com/althi">Thiago Almeida</a> no <a href="http://chocoladesign.com">Choco la Design.</a></br>
jQuery: <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js</a></br>
<a href="#home" >voltar ao topo</span></a>
</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Então... Um exemplo de uma imagem de meia tela, que se redimensiona. OBS: Usei com exemplo um fundo Cinza, mas pode ser uma imagem.

<style>
*{
padding:0;
margin:0;
}

#fundo_div{

width:100%;
max-width:100%;
height:50%;
background: #ccc;
}

</style>

<div id="fundo_div"></div>

Seria isso que deseja?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gfsouza86    0

gfsouza86
Postado

Então... Um exemplo de uma imagem de meia tela, que se redimensiona. OBS: Usei com exemplo um fundo Cinza, mas pode ser uma imagem.

<style>
*{
padding:0;
margin:0;
}

#fundo_div{

width:100%;
max-width:100%;
height:50%;
background: #ccc;
}

</style>

<div id="fundo_div"></div>

Seria isso que deseja?

 

Pra mim aparece a mesma coisa...

Em que lugar eu tenho que colocar essa parte do codigo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

 

Pra mim aparece a mesma coisa...

Em que lugar eu tenho que colocar essa parte do codigo?

 

 

Então, você tem que englobar no código. Esse exemplo que eu fiz, seria para você criar um arquivo HTML de teste, e ver se era o gostaria...

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