Mudar imagem de background a cada refresh

[monteirof7 1]

Olá pessoal,

 

No meu site existe uma imagem em background que cobre toda a pagina (até o scrolling), gostaria de que essa imagem fosse alterada por outra com as mesmas dimensões a cada vez que a pagina fosse atualizada. Por exemplo, eu deixaria umas 3 imagens predefinidas e a cada acesso a essa pagina aparece uma dessas três imagens.

<div class="banner">
				
				 <div class="slider-caption">
                 			
					          	<h1>TEXTO</h1>
					         	<a class="btn btn-primary btn-lg" href="#" style="margin-top:30px;">btn1</a>
                                <a class="btn btn-info btn-lg" href="#" style="margin-top:30px;">Obtn2</a>

				 </div>
            </div>

.banner{
	background:url(../img/imagem_banner.jpg);
	background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	height:80%;
	position: relative;
}

A "imagem_banner.jpg" é a que deve ser alterada a cada refresh.

 

Nao me recorde de ter visto isso em algum site. Estou tentando fazer algo diferente, simplesmente pro site ficar mais dinamico e diferente. Se tiverem alguma ideia sobre isso, agradeço.

 

[rikaschmitt 54]

Tenta algo por jquery:

 

$(document).ready(function(){
var banner = $('.banner'), x = 1 + Math.floor(Math.random() * 3);
if (x == 1) {
banner.css({ background-image:'url(......)' });
}
else if (x == 2) {
banner.css({ background-image:'url(......)' });
}
else if (x == 3) {
banner.css({ background-image:'url(......)' });
}
});

Não testei, então não posso garantir que funcione, mas seria mais ou menos isso.

Ele escolhe um número entre 1~3 e aplica o background de acordo com o número sorteado.

[monteirof7 1]

Está dando um syntax error logo nessa segunda linha:

if (x == 1) {
banner.css({ background-image:'url(......)' });

Quando tiro um dos dois ' resolve, porém assim o codigo nao fica completo.

 

Obrigado pela ajuda.

[William Bruno 1501]

banner.css({ 'background-image': 'url(......)' });

ou

banner.css({ backgroundImage: 'url(......)' });

mas nunca com o hífen em nome de variáveis

[Lucas Medina 17]

banner.css({ 'background-image': 'url(......)' });

ou

banner.css({ backgroundImage: 'url(......)' });

mas nunca com o hífen em nome de variáveis

 

 

A solução do William já deve resolver.

 

Mas acho que dependendo do nome das imagens em si, dá pra fazer isso de forma mais simples.

Digamos que as imagens possuam nomes como background-01.jpg, background-02.jpg, e background-03.jpg:

document.body.style.backgroundImage = "url('/meu/diretorio/das/imagens/background-0" + (Math.floor(Math.random() * 3) + 1) + ".jpg')";

Se as imagens possuírem um nome específico e que não pode ser alterado, é possível fazer isso guardando o nome das imagens num array:

var imagens = [
  "background-bonito-01.jpg",
  "background-legal-02.jpg",
  "background-incrivel-03.jpg"
];
document.body.style.backgroundImage = "url('/meu/diretorio/das/imagens/" + imagens[Math.floor(Math.random() * imagens.length)] + "')";

Assim você não precisaria incluir 93kb no site (insira aqui sua parcela de drama para acusar o tamanho do jquery 1.11.2).

 

Caso você já esteja utilizando do JQuery no seu site, não há problema.

Boa sorte!

[monteirof7 1]

Obrigado a todos, mas nenhuma das opções funcionou.

 

Se restar mais alguma alternativa, me deixem saber.

 

Valeu

[Lucas Medina 17]

Obrigado a todos, mas nenhuma das opções funcionou.

 

Se restar mais alguma alternativa, me deixem saber.

 

Valeu

 

Testei aqui e não houveram problemas.

Está implementando o código corretamente. A base é funcional, mas você precisa adaptá-lo ao que você possuir no seu projeto.

 

Dediquei um fiddle pra essa causa, você pode vê-lo aqui:

 

http://jsfiddle.net/lucasmedina/p9q4s3ov/

[monteirof7 1]

Nao testei esse metodo. Vou fazer!

 

Como o background nao se encontra no 'body' e sim na class 'banner', como devo deixar meu JS? Do jeito abaixo?

Ainda nao entendo de JS, um pouco de jquery talvez...

var imagens = [
  "background-bonito-01.jpg",
  "background-legal-02.jpg",
  "background-incrivel-03.jpg"
];
document.banner.style.backgroundImage = "url('/meu/diretorio/das/imagens/" + imagens[Math.floor(Math.random() * imagens.length)] + "')";

O no CSS, eu devo retirar o atributo bg-image?

 

Valeu

[rikaschmitt 54]

Nao testei esse metodo. Vou fazer!

 

Como o background nao se encontra no 'body' e sim na class 'banner', como devo deixar meu JS? Do jeito abaixo?

Ainda nao entendo de JS, um pouco de jquery talvez...

var imagens = [
  "background-bonito-01.jpg",
  "background-legal-02.jpg",
  "background-incrivel-03.jpg"
];
document.banner.style.backgroundImage = "url('/meu/diretorio/das/imagens/" + imagens[Math.floor(Math.random() * imagens.length)] + "')";

O no CSS, eu devo retirar o atributo bg-image?

 

Valeu

 

 

Adiciona uma ID na div do banner e altera para:

document.getElementById('banner').style.backgroundImage

[Lucas Medina 17]

Javascript é uma dama de salão; conhecer, se decepcionar e se surpreender faz parte da experiência.

 

Tente inserir o snippet no seu código, de acordo com o que o rikaschmitt comentou, e deve ser o suficiente.

Se tiver qualquer dúvida, é só falar que estamos aí ;) a gente faz o que pode.