Imagem de fundo diferente em cada página

Publicado por em 08/05/2013 às 17h15

Neste tutorial vamos ensinar como colocar imagens de fundo apenas em uma página específica.

Como é possível alterar a imagem de fundo pelo próprio gerenciador de Design do SitePX, é recomendado não utilizar ele para imagens de fundo se você for trabalhar com estas regras avançadas no CSS, neste caso temos que escrever todas as regras para cada caso, podendo criar uma regra geral (utilizando o seletor #ws) e outras específicas (utilizando as classes de identificação junto ao seletor #ws.pg-pagina ou #ws.it-conteudo).

Primeiro você vai precisar buscar o endereço da imagem que vai utilizar em sua biblioteca de imagens, clique em Editar na imagem desejada para buscar o link e copie a partir do "/img/...", para este exemplo vamos utilizar o seguinte endereço:

/img/152048/7164-sheldon-cooper-the-big-bang-theory-1280x800-movie-wallpaper-124073.jpg

Agora vamos às regras de CSS que vamos incluir:

#ws.it-imagem-de-fundo-diferente-em-cada-pagina{
  background-image:url(/img/152048/7164-sheldon-cooper-the-big-bang-theory-1280x800-movie-wallpaper-124073.jpg);
  background-position:0 200px;
  background-repeat:no-repeat;
  background-color:#AE1319;
}

No caso coloquei a imagem de fundo para ser apresentada apenas neste item do blog, então tive que usar o endereço da página como uma classe do seletor CSS, no caso um item de blog ganha o prefixo "it-", se for uma página ganha o prefixo "pg-".

Aprendendo CSS:
background-image: é a propriedade utilizada para indicar qual imagem de fundo vai abrir para um dado seletor;
background-position: é a posição x e y relativa à janela do navegador (no caso da aplicação no fundo do site);
background-repeat: indica se a imagem de fundo vai se repetir ou ser exibida uma vez só;
background-color: é a propriedade de cor de fundo, que vai preencher o espaço antes da imagem.

voltar para Tutoriais

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||