Ir para conteúdo

POWERED BY:

Arquivado

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

china_black

[Resolvido] Background com Imagem

Por , em Desenvolvimento frontend

Recommended Posts

china_black    0

china_black
Postado

Olá pessoal, estou com uma dúvida aqui.

Gostaria de colocar no Background 1 imagem em JPEG, só que não sei como eu posso colocar ela fazendo com que todas as resoluções a imagem fique no mesmo lugar

 

Se eu pegar e colocar uma imagem em 1900x1200, quem vê o layout em 1024 irá ver pouca parte da imagem, e se for ao contrário a imagem não irá completar todo o layout

 

Como eu posso resolver esse problema, existe algum alinhamento que coloco para que em todas as resoluções fique a imagem correta??!

 

Aguardo, obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

china_black    0

china_black
Postado

Existe algum script pra isso?

Já vi vários site usando uma imagem Enorme só que ela redimensiona sempre de acordo com o tamanho da sua tela

 

Se você tem uma tela de 22 você ve a imagem da mesma maneira que em uma tela de 14

 

Aqui tem um exemplo de um site que usa isso: http://www.avatarmovie.com/

Compartilhar este post

Link para o post
Compartilhar em outros sites

kreator    0

kreator
Postado

meu querido o site q você apresentou é em flash!!em qualquer resolução o swf se expande automaticamente se não tiver algum elemento html com js ou object o controlando delimitando os espaço de interação,com html e css voce pod defenir a largura em % da sua div q deseja ampliar o background e mandar um background-repeat:repeat-y; para quando ampliar a resolução o background auto completar o layout!!

 

 

bem é minha sugestão,se estiver errado me corrijam!!

 

abraço!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Você pode centralizar o plano de fundo com

background: url(...) center top no-repeat;

Assim qto mais "wide" o monitor, mais coisa ele pode ver mas, a princípio, todo mundo vê a mesma coisa de começo.

 

Método gambiarra:

<body>
    <img src="bg" id="gambiarrafeia" alt="nao sou um elemento semantico">
... resto da marcação</body>

#gambiarrafeia {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

china_black    0

china_black
Postado

Você pode centralizar o plano de fundo com

background: url(...) center top no-repeat;

Assim qto mais "wide" o monitor, mais coisa ele pode ver mas, a princípio, todo mundo vê a mesma coisa de começo.

 

Método gambiarra:

<body>
    <img src="bg" id="gambiarrafeia" alt="nao sou um elemento semantico">
... resto da marcação</body>

#gambiarrafeia {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

 

Evandro eu não consegui usar essa #gambiarrafeia, nem deu certo em meu código, mas o 

background: url(...) center top no-repeat;
deu certo

 

Só queria saber se existe uma possibilidade neste caso:

 

Eu faço uma imagem de 1920x1200 ai quando a pessoa entrar em um monitor de 1280 ou 1024 a imagem redimensionasse sozinha pra não pegar apenas um pedaço da imagem......porque ai quem tem uma tela de 1920 não vê 70% do site vazio e a foto estaria neste tamanho. assim resolveria meu problema

 

Isso é possivel?!

 

Aguardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Caxito    0

Bruno Caxito
Postado

Uma imagem destas demoraria demais para fazer download

 

a unica forma que conheço seria criar a imagem em cada tamanho necessário entao depois usar Javascript para descobrir a resolução do monitor e abrir a imagem que tem o mesmo tamanho da resolução.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

tente adicionar mais três regras:

 

#gambiarrafeia {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -7;
}

Testei e deu.

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