Dificuldades com site responsivo

[monteirof7 1]

Olá pessoal, estou montando um novo site responsivo, porém acabei de entrar no "mundo responsivo" e não entendo o suficiente ainda.

 

Gostaria de na pagina inicial do meu site deixar uma imagem de fundo, e sobre ela colocar textos e divs (botões). Basicamente eu consegui fazer isso, meu problema está com a distorção da imagem (por exemplo, ao se uitlizado em um navegador com um width menor, ao inves de cortar a imagem, o meu codigo ta comprimindo ela), do tamanho das letras, e na mudança de altura de acordo com a resolução do navegador.

 

 

 

Aqui está ela em uma resolução maior:

 

 

 

 

 

 

Aqui está ela em uma resolução menor:

 

 

 

 

 

 

 

 

 

Acho que pelas imagens vcs conseguem entender os meus problemas.

 

 

Meu HTML:

				<!-- banner -->
			<div class="banner">
				
				 <div class="slider-caption">
					          	<h1>Encontre! Lorem ipsum dolor sit amet decat parabellum. Lorem ipsum fortis.</h1>
					         	<a class="btn btn-primary" href="#" style="margin-top:20px;">Encontre! Lorem ipsum dolor.</a>

				 </div>
            </div>
				 <!--//banner -->

Aqui está meu CSS:

.banner{
	background:url(../img/buziosbanner.jpg);
	background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	height:80%;
	background-size: 100% 100%;	
	position: relative;
}

/*-- slider-caption --*/
.slider-caption{
	position: absolute;
	top: 0;
	z-index: 999;
	left:8%;
	top: 26%;
}
.slider-caption h1{
	font-weight: 700;
	text-transform: uppercase;
	font-size: 8vmin;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	margin: 0 auto;
	padding: 0;
	color: #FFF;
	font-family: 'Carrois Gothic SC', sans-serif;
	text-align: center;
	width: 77%;
	line-height: 1.2em;
}
.slider-caption{
	text-align:center;
}
.slider-caption h1 span{
	color:#c1061b;
}

Agradeço desde já a ajuda de vcs!

[WictorP 9]

O problema está aqui:

background-size: 100% 100%;

 

Isso faz com que a imagem seja redimensionada para 100% do tamanho da div, ou seja, em resolução maior a div seria maior ao definir width com %, o height a mesma coisa, então o problema está ai...

[Electronic 124]

Veja se é isso:

http://jsfiddle.net/z4e29b23/2/

araste a divisão pra ver larguras diferentes

 

e lógico que isso nao é a solução pronta, é um exemplo

 

detalhe:

você esta sobrescrevendo regras: background-size uma hora você diz ser cover depois manda ser 100% 100%