[Resolvido] Background com tamanho variável

[dzanella 0]

Olá...

Gostaria de saber se é possível fazer com que um Background-image se redimensione conforme o tamanho da div.

É que tenho uma div com width:auto e queria q a imagem de fundo obedecesse o tamanho da div.

Mais ou menos como acontece na página inicial do google, quando você escolhe um plano de fundo para ela.

No aguardo...

[Kineri 0]

Imagens como background-image só podem ser redimensionadas com CSS3 mas não é recomendado devido à falta de suporte de alguns dos navegadores.

 

Se quiser redimensionar uma imagem "de fundo", trabalhe com camadas usando a tag img mesmo.

[dzanella 0]

você tem um exemplo de como posso fazer isso?

[Kineri 0]

Com as camadas, pode ser feito algo como:

 

HTML

<div id="bg-img">
 <img src="fundo.jpg" />
</div>

<div id="site">
 Todo o resto do site
</div>

 

CSS

#bg-img{
 position: absolute;
 z-index: 0;
}

#bg-img img{
 width: 100%
 height: 100%
}

#site{
 position: absolute;
 z-index: 100;
}

[dzanella 0]

Deu certo amigo...

a imagem redimensiona certinho, mas ela está por cima de todos os elementos da div...

[Kineri 0]

Aqui está funcionando.

 

Verifique se, na div da imagem de fundo <div id="bg-img"> está somente a imagem, e o resto do conteúdo na outra div

[dzanella 0]

Resolvido.

Mas um pouco diferente do sugerido... apesar de ter ajudado muito...

 

segue meu exemplo:

 

HTML:

<div class="cabecalho">


           <div class="logoVendors">
               <img height="50px" src="../Images/LogoVendors.gif" width="110px" />
           </div>

           <div class="divImgFundo">
               <img src="../Images/FundoTopo.jpg" />
           </div>

           <p>Vendors' WEB</p>

           <div class="logoMicroton">
               <img src="../Images/logoSemFundo.gif" Height="86px" Width="110px" />
           </div>

           <div class="clear"></div>

       </div>

 

CSS

.logoVendors
{
right:82%;
position: absolute;
z-index:99;
padding-top:1px;
}

.cabecalho p
{
width:200px;
z-index:98;
left:50%;
margin-left: -100px;
position:inherit;
padding-top:13px;
}

.logoMicroton
{
clear:both;
left:80%;
position: absolute;
z-index:100;
margin-top:-50px;
}

.divImgFundo
{
position: absolute;
width:auto;
height:75px;
z-index:0;
text-align:center;
}

.divImgFundo img
{
width: 100%;
height:75px;
}

.cabecalho
{
font-family: 'Century Gothic';
font-size: large;
font-weight: bold;
color: #FFFFFF;
display:block;
width:auto;
height:75px;
text-align: center;
position: relative;
}

 

Valeu Kineri!!

você Ajudou muuito!