Ir para conteúdo

POWERED BY:

Arquivado

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

Ricardo web

Redimensionar um imagem usada no background-image

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Designer    0

Carlos Designer
Postado

redimensionar acho que não tem como!

 

você pode no maximo repetir ela ou não!

 

ex:

 

background:url(imagem.jpg) repeat-x top left;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roosevelt Franklin    2

Roosevelt Franklin
Postado

Amigo veja se eu entendi, você quer adaptar seu background-image para a resolução do usuário?

 

Se for isso crie uma imagem para cada largura de resolução, ou seja, 800, 1024, 1280 e 1600.

 

e use o script abaixo em seu index.html

<html>
<script type="text/javascript">
function getBG(x)
{
switch(x)
{
case 1600:
document.body.background = "1600.jpg"
break;

case 1280:
document.body.background = "1280.jpg"
break;

case 1024:
document.body.background = "1024.jpg"
break;

case 800:
document.body.background = "800.jpg"
break;

case 640:
document.body.background = "640.jpg"
break;

}
}
</script>
</head>
<body onLoad="getBG(screen.width)">
</body>
</html>
Espero ter ajudado.

Abraço,

Roosevelt

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo web    0

Ricardo web
Postado

Olá, Roosevelt Franklin.

 

Não é isso. Eu tenho uma imagem que é muito grande. Eu quero "enquadrar" em um espaço menor, ou seja, quero informar a altura e largura desejada para que ela fique menor.

como se fosse assim: <img src="imagem.jpg" width=100 height=100> só que ao invés de fazer no HTML eu queria fazer no CSS.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SonicGyn    0

SonicGyn
Postado

to com mesmo dúvida, pois eu queria colocar no CSS e não sei.

o meu CSS é assim na secção de background:

 

body {

background: url(images/fundo01.jpg) no-repeat 0 0 #fff;

background-attachment:fixed;

background-position: top center;

color: #000;

font-family: Arial, Verdana, sans-serif;

margin: 0;

padding: 0;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

Não seria mais lógico fazer a imagem no tamanho certo usando um editor de imagens como o Photoshop?

 

Redimensionar imagens, seja em HTML, JS, PHP, ASP, VB, CLIPPER, BASIC... Nunca dá certo...

Para trabalhar com imagens, usa-se softwares de imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Concordo com o Scaico, é complicado redimensionar imagens dentro do browser. Melhor ter elas já na resolução correta que você vai utilizar no site, até porque utilizar uma imagem maior do que você precisa é desperdício de banda...

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Ricardo,

 

você pode fazer assim:

 

HTML

<div id="imagem">
</div>

CSS

#imagem {
	background-image: url(imagem.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #09F;
	width: 100px;
	height: 100px;
}

Explicando o CSS:

 

background-image: url(imagem.jpg); http://forum.imasters.com.br/public/style_emoticons/default/seta.gif ele pega a imagem imagem.jpg e transforma no background da div;

background-repeat: no-repeat; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif ele diz para o browser não repetir em nenhum momento a imagem;

background-attachment: fixed; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif dia ao browser que a imagem deve ser fixa;

background-color: #09F; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif aqui diz que se sobrar algum espaço que a imagem não se encaixou e vai completar com a cor #09F;

width: 100px; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif define uma largira de 100px;

height: 100px; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif define uma altura de 100px;

 

Sonic,

 

até onde eu sei, não da para ajustar a largura e altura do body, simplesmente porque ele é o corpo da página. Você pode criar uma <div id="geral">, nela fazer as alterações que deseja.

 

Abraços.

 

P.S.: Não vi as postagens anteriores. :rolleyes: :rolleyes: :rolleyes: É como o INSIDE disse. Quando redimensionar a imagem pelo CSS, ela vai continuar com o mesmo tamanho (Kbytes).

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Como eu posso redimensionar uma imagem que eu coloquei como background-image em uma CSS?

Impossível.

Nenhuma propriedade CSS redimensiona backgrounds.

Melhor você recortar a imagem do tamanho exato que você quer, já dando o resize em algum programa editor. Por CSS como background não é possível.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

É isso aí que o Bruno disse.

 

O que você pode fazer é ocultar o resto da imagem. Lembrando que não da para fazer isso no body.

 

Abraços.

 

P.S.: Nunca usei o Wordpress. http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

na verdade da pra fazer isso no body sim... só que vai depender da resolução do rapaz.

 

Por ex:

 

Se voce jogar uma imagem 1280x1024 no body e quem acessar usar 1024x768, so vai aparecer uma parte.

 

No site que estou fazendo agora eu tenho 2 BGs diferentes.

1 pra cada resolução.

Quando o cara entra no site, um JS pega a resolução dele e aplica o BG adequado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

Sim sim!

 

Na verdade, não só redimensionei como fiz outras adaptações tambem, para que ficasse bom nas duas resoluções.

 

Como eu disse antes: redimensionar = Photoshop (ou equivalente).

Qualquer coisa diferente é gambiarra.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Ahhh tá. http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

Pensei que você tinha conseguido redimensionar a imagem através do CSS dentro da tag body.

 

Abração.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roosevelt Franklin    2

Roosevelt Franklin
Postado

Isso é o que eu já havia dito antes:

 

 

Se for isso crie uma imagem para cada largura de resolução, ou seja, 800, 1024, 1280 e 1600.

 

e use o script abaixo em seu index.html

<html>
<script type="text/javascript">
function getBG(x)
{
switch(x)
{
case 1600:
document.body.background = "1600.jpg"
break;

case 1280:
document.body.background = "1280.jpg"
break;

case 1024:
document.body.background = "1024.jpg"
break;

case 800:
document.body.background = "800.jpg"
break;

case 640:
document.body.background = "640.jpg"
break;

}
}
</script>
</head>
<body onLoad="getBG(screen.width)">
</body>
</html>
Para cada resolução será usado um BG diferente.

 

Feliz Natal pessoal!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

a malehor alternativa é essa aqui

 

http://forum.imasters.com.br/index.php...t&p=1191426

 

#imagem {
	background: transparent url(imagem.jpg) no-repeat fixed center center;
}

ela vai centralizar a imagem e de acordo com a resolução vai exibindo mais da imagem

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@Bruno Motta, esse tópico é de 2008.

 

Em 2008 não existia nem o rascunho dessa propriedade. Dá uma olhada na data antes de postar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

juninho26pro    0

juninho26pro
Postado

O Bruno Motta foi quem realmente deu a solução mais simples e eficiente, eu também estava com a mesma dúvida de quem criou este tópico, e a reposta do Bruno foi qual solucionou meu pequeno problema =D

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