Background fixo independente da resolução

[rikaschmitt 54]

Bom dia galera.

 

Preciso que um background fique fixo, independente da resolução da pessoa. Além disso, a logo precisa ficar sempre na parte escura desse background. Fiz um exemplo de como deve ser:

 

A bolinha é a logo., a borda rosa representa a resolução, o tracejado representa o container do site e o resto do fundo que fica para fora da resolução é o background "escondido".

 

Como dá pra notar, o background fica fixo e a logo sempre permanece na área escura.

 

Estou usando:

background-color:#FFF;
background-image:url('../img/bg_diagonal_2.jpg');
background-position:center top;
background-repeat:no-repeat;

Mas até uma certa resolução dá certo, depois ele começa a se deslocar e não fica certo.

Como poderia fazer isso?

Terei que optar por jQuery para ir ajustando de acordo com o resize?

[Guilherme Souza Santos 6]

cara nao seria melhor recortar a logo é posicionar ela independente via css mesmo

[rikaschmitt 54]

cara nao seria melhor recortar a logo é posicionar ela independente via css mesmo

 

Sim né, é óbvio. Estou fazendo isso.

O problema é somente o background.

[Lucas Medina 17]

Opa!

 

Tudo vai depender de como você vai preferir alinhar.

Da forma como está sendo dado nas imagens que você mandou, acho que a melhor forma é posicionar o bg pelo CSS mesmo.

 

background-position: ?px ?px;

 

A partir disso, você pode usar media queries com base na resolução onde os problemas começam a surgir.

Tem algum exemplo que você possa mostrar pra gente? :)

[rikaschmitt 54]

Opa!

 

Tudo vai depender de como você vai preferir alinhar.

Da forma como está sendo dado nas imagens que você mandou, acho que a melhor forma é posicionar o bg pelo CSS mesmo.

 

background-position: ?px ?px;

 

A partir disso, você pode usar media queries com base na resolução onde os problemas começam a surgir.

Tem algum exemplo que você possa mostrar pra gente? :)

 

Poisé, ainda não tenho ele online.

Vou testar com css mesmo, valeu.

[William Bruno 1501]

Eu realmente não entendi pq o center top não resolve o seu problema.

Desde que o container do logo tenha uma largura mínima para aparecer a parte escura e fique centralizado, esse é o comportamento básico.

[WictorP 9]

 

background-size:100%;
background-attachment:fixed;

[Marlon Pacheco 132]

Buenas tchê.

 

Acho que o teu problema está justamente no center.

Experimenta um

background-position: 0px 0px;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

[rikaschmitt 54]

Não dá pra por "0px 0px" porque dai a imagem do fundo não fica centralizada e a parte escuro acaba pegando mais da metade da tela.

 

A imagem de fundo tem 1920 de largura, ela tem que ficar centralizada para que a parte escura fique certo. O problema é que uso bootstrap, e em resoluções menores, o container dele é reduzido e a logo acaba saindo da parte escura.

 

Provavelmente terei que ajustar manualmente o background de acordo com o breakpoint mesmo.

 

Ai ai.. esses designers que criam essas frescuras pra dificultar nossa vida. HAHAHA

[Electronic 124]

max-width

 

Cara ja passei por essa situação um pouco diferente

pois era um banner de 2560px e ele tinha que ficar sempre centralizado independente da largura da tela

 

a solucao que usei foi isso

 

http://jsfiddle.net/0ds8k7w0/

max-width:2560px;
background: url(IMAGEM) no-repeat center center;
margin:auto; /*se tiver imagem menor que a div*/

[rikaschmitt 54]

 

max-width

 

Cara ja passei por essa situação um pouco diferente

pois era um banner de 2560px e ele tinha que ficar sempre centralizado independente da largura da tela

 

a solucao que usei foi isso

 

http://jsfiddle.net/0ds8k7w0/

max-width:2560px;
background: url(IMAGEM) no-repeat center center;
margin:auto; /*se tiver imagem menor que a div*/

 

 

Sim sim, mas não é exatamente o que precisava.

 

 

 

Pois bem, tive que mexer na posição do background manualmente de acordo com a resolução. Agora esperar ver se é isso realmente que o designer quer. :P

 

Valeu.