Como tornar imagens não roláveis com HTML

Escrito por kevin lee | Traduzido por lu ribeiro
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como tornar imagens não roláveis com HTML
Fotos que não rolam podem surpreender alguns visitantes do site (Jupiterimages/Photos.com/Getty Images)

A maioria das páginas da web têm imagens de fundo que se movem verticalmente quando você clique na barra de rolagem do navegador. Todos os elementos de uma página rolam por padrão. Usando Cascading Style Sheets, ou CSS, você pode alterar esse comportamento padrão e fazer qualquer imagem de fundo não ser mais rolável. Isso cria um efeito intrigante de "flutuante". Os visitantes do site percorrem a página para ver o conteúdo, mas a imagem de fundo permanece fixa em um local específico.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Inicie o bloco de notas e abra um dos seus documentos HTML. Escolha um documento que seja longo o suficiente para se deslocar. Idealmente, ele será uma página da web que contém uma grande quantidade de texto.

  2. 2

    Adicione o seguinte código CSS na "head" do documento:

    <style type="text/css"> body { background-image: url("AlgumaImagem.jpg");background-attachment:fixed; background-repeat:no-repeat; background-position:center center; } </style>

  3. 3

    Substitua "AlgumaImagem.jpg" com o nome de uma das suas imagens. Por exemplo, se você quiser usar uma imagem com o nome "defrag.gif", que se encontra em "Ferramentas" na sua unidade C:, por exemplo, faça o código dessa forma:

    <style type="text/css"> body { background-image: url("C:\Ferramentas\defrag.gif");background-attachment:fixed; background-repeat:no-repeat; background-position:center center; } </style>

    Se a imagem estiver na web, use a URL da imagem. A propriedade background-attachment determina se as imagens irão rolar. O HTML não irá rolar a imagem se você definir o valor para "fixo"(fixed) como mostrado acima. O "no-repeat" diz ao navegador para não repetir a imagem. A propriedade background-position permite definir coordenadas horizontais e verticais da imagem. Nesse exemplo, ambos são "centro"(center). Isso faz com que o navegador centralize a imagem na página da web.

  4. 4

    Salve o documento HTML. Abra-o no seu navegador e navegue pela página da web. A imagem não irá se mover.

Dicas & Advertências

  • Para permitir que a imagem se desloque, alterar o valor do background-attachment de "fixa"(fixed) para "rolar"(roll). Outros valores de posicionamento possíveis para a propriedade background-position incluem "top", "bottom", "left" e "right". Por exemplo, se você quiser que a foto para permaneça fixa na parte superior direita da página, altere o valor de posição de "center" - como mostra este exemplo - para "top right" (canto superior direito), sem as aspas. Você também pode usar valores de pixel para as coordenadas horizontais e verticais. Em vez de usar "top right" ou "center", seria possível usar 200px 400px. Isso irá fixar a imagem de 200 pixels da borda esquerda da página e 400 pixels a partir do topo da página.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível