Alterar fundos das laterais se a tela for maior

[Silvana... 0]

Como sou nova nessa área...

Estou com dúvidas do que usar...

Preciso colocar fundo nas laterais se a resolução da tela do usuário for maior que a do site.

 

Já vi que em javascript tem o comando pra detectar a resolução (screen.width>1007).

 

sugestões...?

[Diéssica 140]

Silvana, dependendo do que você queira não é preciso utilizar Javascript, apenas CSS.

 

Porém não entendi muito bem, tem um exemplo do que você quer fazer?

[Leonardo™ 0]

Silvana... seu layout possui largura fixa e um usuário com monitor de resolução maior ficará com o restante da tela em branco, é isso?

 

Se entendi bem, basta que você aplique na propriedade background de seu "box" a opção repeat-x, ou ainda, poderá usar width: 100% para cobrir toda extensão da tela.

 

exemplo

#box {

   background: #CCC url(myImage.gif) repeat-x;

}

 

Veja se isso poderá ajudar.

[Silvana... 0]

Silvana, dependendo do que você queira não é preciso utilizar Javascript, apenas CSS.

 

Porém não entendi muito bem, tem um exemplo do que você quer fazer?

 

 

a página do site está definida com width de 1000px.

meu chefe quer um fundo degradê nas laterais, se a resolução da tela do usuário for maior do que eu defini para a página.

por exemplo: se a resolução de tela for 1200 vai aparecer esse fundo degrade nas laterais em direção ao centro.

[Leonardo™ 0]

Silvana... então é simples! Basta fazer o que te falei e aplicar o plano de fundo no elemento certo.

[Giovani 104]

Corte um filete, manda repetir no eixo-x e pronto :natalsmile:

Silvana... então é simples! Basta fazer o que te falei e aplicar o plano de fundo no elemento certo.

[Diéssica 140]

a página do site está definida com width de 1000px.

meu chefe quer um fundo degradê nas laterais, se a resolução da tela do usuário for maior do que eu defini para a página.

 

Então tu deve colocar um background repeat-x com o fundo degradê na altura que tu quiser na BODY do site, no CSS.

 

Assim:

 

body {
    background: #FFF url(imagemdobackground.jpg) repeat-x;
}

 

O #FFF (cor) à tua escolha.

 

Provavelmente a div dessa "página do site que tá definida com width de 1000px" tá com margin:auto, pra centralizar a pagina.

 

Então tu deixa na CSS da div o fundo por exemplo, se ele for branco de 1000px com background: #FFF (não confunde com o exemplo acima do body).

 

Aí vai ficar a parte de 1000px branca e as partes maiores que 1000px com o fundo branco degrade aparecendo.

 

As outras soluções tb são válidas, mas pra mim esse é o jeito mais simples =)

 

Ex final, onde imagemdobackground.jpg seria o degrade repetindo apenas para os lados e com fundo tb branco caso o degrade terminar com branco.

 

Na div com id "minhapagina" estou definindo a largura e a div centralizada com fundo branco.

body {
    background: #FFF url(imagemdobackground.jpg) repeat-x;
}

#minhapagina {
    width:1000px;
    background:#FFF;
    margin:auto;
}

 

Desculpa, esse teclado que eu to é ruim com acentos e fica chato tb com os códigos!

 

[]s

Diéssica Gurskas

[Lauriana Daniel 0]

Cortando um filete e mandando repetir no eixo-x não resolveu?? Tive um problema igual no blog Depoimentos de Amor e resolvi assim.. mas agora até mudei o estilo!