Como aplicar este background?

[Maykel-ctba 233]

Fala galera!

 

Estou com uma dúvida, e não sei como procurar isso na internet.

Tenho o seguinte layout desenvolvido:

 

 

Como podem ver, existe um "container" central com o conteúdo, e a parte laranja do background se aplica apenas à esquerda.

Porém, ao aplicar a cor laranja no "aside", obviamente, só aquele trecho fica laranja.

 

 

Minha duvida é: Qual a melhor maneira de fazer o background neste caso?

 

Tentei fazendo via imagem, mas quando vou diminuindo o site (uso bootstrap, ele é responsivo), vai ficando torto. Fiz uma imagem bem maior do que o container (ex: 3000 de largura) com o corte exato para monitores como o meu (acima de 1200px de largura de navegador), porém ao diminuir, a parte laranja vai entrando aonde não deve, indo mais a direita.

 

Idéias?

 

 

--- edit

 

Ah sim, o código:

<div class="container" id="page">
    <div class="row">
        <aside class="col-sm-3">
            <h1>Encontre seu produto</h1>
            <form action="/busca" method="post" enctype="multipart/form-data" class="validar">
                <input type="hidden" name="hdTipo" value="nome" />
                <input type="text" placeholder="Digite sua busca..." name="txBusca" class="validate[required]" />
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </aside>
        <div class="col-sm-9">
        
        </div>
    </div>
</div>

	#content #page aside {
		background:#E8811A;
		padding:70px 30px;
	}
	#content #page aside h1 {
		font-family:'Raleway',sans-serif;
		color:#FFF;
		font-size:24px;
		font-weight:700;
		margin:0 0 30px 0;
		padding:0;
		text-transform:uppercase;
	}
	#content #page aside h2 {
		font-family:'Oswald',sans-serif;
		color:#FFF;
		font-size:16px;
		font-weight:normal;
		margin:0 0 15px 0;
		padding:0;
		text-transform:uppercase;
	}
	#content #page aside .busca {
		clear:both;	
		border-top:2px dotted rgba(255,255,255,0.3);
		margin:30px 0 0 0;
		padding:30px 0 0 0;
	}

[rikaschmitt 54]

Pois é.. essas coisas sempre quebram minhas pernas.

 

Das vezes que tive que usar uma "gambiarra" para isso, foi uma imagem mesmo. :\

[Maykel-ctba 233]

hahahah, @rikaschmitt!

 

Pior que é um efeito interessante. Com imagem ele soluciona (tá certo que eu teria que criar um background pra cada break-size do bootstrap). Bom que são imagens leves, 1px de altura.

 

Queria saber se tinha algum outro método revolucionário mesmo, pra aprender.

[stromdh 15]

fiz um site exatamente assim, com o lado esquerdo com uma cor e o lado que tem conteúdo outra cor. Resolvi facilmente da seguinte forma:

 

- coloquei o site encapsulado dentro de uma div com a classe contentLayout e setei width: 100%

- fiz um aside com width: 30%; background-color: orange; float: left;

- coloquei um article para o conteudo com width: 70% background-color: withe; float:right;

[VitorF 1]

Isso provavelmente funcione, só não sei se é o jeito mais indicado para solucionar seu problema... afinal se você está utilizando o bootstrap, seria correto resolver com alguma funcionalidade dele. Mas de qualquer forma tá ai, acho que vai funcionar.

body

{

background: #e48326;

background: -moz-linear-gradient(left, #e48326 53%, #e48326 53%, #ffffff 53%, #ffffff 53%);

background: -webkit-gradient(linear, left top, right top, color-stop(53%,#e48326), color-stop(53%,#e48326), color- stop(53%,#ffffff), color-stop(53%,#ffffff));

background: -webkit-linear-gradient(left, #e48326 53%,#e48326 53%,#ffffff 53%,#ffffff 53%);

background: -o-linear-gradient(left, #e48326 53%,#e48326 53%,#ffffff 53%,#ffffff 53%);

background: -ms-linear-gradient(left, #e48326 53%,#e48326 53%,#ffffff 53%,#ffffff 53%);

background: linear-gradient(to right, #e48326 53%,#e48326 53%,#ffffff 53%,#ffffff 53%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e48326', endColorstr='#ffffff',GradientType=1 );

}