Como alinhar uma imagem de fundo no cabeçalho à direita

Este código permite alinhar um fundo, ou seja, uma imagem no cabeçalho, sempre ao lado direito do browser, independentemente da largura da janela do browser. Neste exemplo, o banner (invertido) está alinhado ao lado direito da janela:
Alinhamento de objectos no cabeçalho ao lado direito do browser
  1. No backoffice da sua loja clique em :
    Design -> Editar elementos de navegação (na caixa do modelo)
  2. Escolha o cabeçalho
    Elemento de navegeção Cabeçalho
  3. Clique em "Adicionar elementos de navegação"
  4. Escolha a opção "Definido pelo utilizador"
    Escolher tipo Definido pelo utilizador
  5. Clique no botão "Adicionar"
  6. Para editar o novo elemento HTML, clique na hiperligação do novo elementos
  7. Insira o seguinte código
    NB: Deverá substituir a imagem por uma imagem sua que poderá inserir no Editor de Texto
    a.) Abra o Editor de Texto ;
    b.) Clique no símbolo para inserir uma imagem;
    c.) Insira a imagem;
    d.) Clique na imagem e seleccione o endereço da mesma como ilustrado em baixo;
    e.) Copie e substitua o endereço da imagem no código, nomeadamento o valor do atributo "background-image: url".

<style type="text/css">
.Header table.SizeContainer{
width:100%;
background-image: url(/WebRoot/Store/Shops/Demo_002E_SINFIC_002E_HM_002E_AH/MediaGallery/bgr_header.gif);
background-repeat: no-repeat;
background-position: right top; }
</style>

 

Alinhar os fundos do cabeçalho e navegação topo

Em alguns casos poderá ser necessário inserir e alinhar também um fundo na barra de navegação topo.

Captura de ecrã que identifica a barra de navegação topo

 

Neste caso, poderá copiar o código que já inseriu para o fundo do cabeçalho, alterando apenas a designação para o elementos de navegação topo.
Na definição do estilo, deverá substituir a identificação ".Header table.SizeContainer" por ".NavBarTop .PropertyContainer".

 

Assim, o código a colocar na caixa HTML para alinhar os dois fundos (cabeçalho e navegação topo) deverá corresponder ao seguinte, exceptuando os endereços das imagens (URL):

<style type="text/css">
.Header table.SizeContainer{
width:100%;
background-image: url(/WebRoot/Store/Shops/suaLoja/MediaGallery/HeaderBackgroundImageRight.jpg);
background-repeat: no-repeat;
background-position: right top; }

.NavBarTop .PropertyContainer{
background-image: url(/WebRoot/Store/Shops/suaLoja/MediaGallery/TopBackgroundImage.jpg);
background-repeat: no-repeat;
background-position: right top;
text-align: left;
}

</style>