Background Fixo

[PHP_desenvolvimento 2]

bom dia galera !

 

Estou criando um efeito de pré-loader com css (pode ser visto no site: http://pfdeveloper.com/loader/)%C2'> javascript e acontece que a imagem de cima não se enquadra na imagem de baixo e vária muito por conta de muitos navegadores. A imagem de cima está com background-attachment e por conta dele não se enquadra, isso porque a imagem se alinha a janela do navegador e não ao div.

 

Queria uma sugestão de vocês:

 

1) Existe outra forma de fazer esse efeito na imagem aonde a mesma fica fixa no fundo ?

2) Existe uma forma de alinhar o background-attachment ao div ?

 

Fico no aguardo de sugestões de vocês no que pode ser melhorado... Obrigado.

[leonardo de andrade baessa 16]

Seria algo desse tipo:?

http://tympanus.net/Tutorials/PagePreloadingEffect/

[PHP_desenvolvimento 2]

Olá amiga tudo joia ?

 

Então não seria isso, você pode ver no site que passei acima que o efeito do icone fica fora da marcação da marca d'agua.

Como pode ser visto a arte de cima imagem de cima está com background-attachment só que ela ajusta ao janela do navegador e não ao div, preciso de uma forma para ajustar ao div ou fazer esse efeito da imagem acima.

[PHP_desenvolvimento 2]

Bom dia Galera,

 

Alguma sugestão para esse efeito ou outro forma melhor de fazer ? Já procurei muito e não consigo nada para fazer o efeito ficar alinhando com o fundo.

[Maujor 144]

...você pode ver no site que passei acima ...

 

site: javascript? Isso é muito vago. Por favor passe o link para o site que mostra o efeito que você está querendo obter, para podermos analisar.

[PHP_desenvolvimento 2]

Olá Maujor,

 

Pode ser visto conforme o link na abertura do post que é a efeito está em css somente a ação em JScript. O que acontece e que a imagem de cima está em background-attachment para que quando for subindo a imagem não ter distorção.

 

Só que acontece que o mesmo segue layout da janela e não do DIV, ficando fora de esquadro.

 

O que preciso saber se existe alguma forma de fazer de aparecer a imagem sem mexer no tamanho da mesma.

[Maujor 144]

Olá Maujor,

 

Pode ser visto conforme o link na abertura do post ...

Você não forneceu nenhum link na abertura do post. Apenas citou: site:javascript

Onde posso visualizar o efeito? Qual é endereço da página web que mostra o efeito?

[PHP_desenvolvimento 2]

Segue o link: http://pfdeveloper.com/loader/

[Maujor 144]

Altere o valor da propriedade background-attachment do div.quadro de fixed para local,
conforme mostrado a seguir:

.quadro {
 
    ...
   background-attachment: local;
}

[FelipeMussolini 1]

Uso assim para um background 100% e fixo.

html {
	position: relative;
	margin: 0;
	padding: 0;
	background-image: url(bg.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-color: transparent;
	height: 80%;
	width: 100%;
	background-position: center center;
	
}

[PHP_desenvolvimento 2]

Obg deu certo galera.

[Maujor 144]

Obg deu certo galera.

A maior e mais nobre finalidade de um fórum, ao contrário do que possa parecer, não é a de resolver o problema de um participante e sim criar uma repositório de soluções a problemas que poderão ser os mesmos de outros participantes e assim servir de valiosa fonte de consulta futura.

 

Por favor, poste a solução do problema para ficar registrado e todos eventualmente se beneficiarem da resposta no futuro.