Como sobrepor uma imagem em posição fixa em um website

Escrito por ruri ranbe | Traduzido por felipe zschornack
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como sobrepor uma imagem em posição fixa em um website
Como sobrepor uma imagem em posição fixa em um website (Hemera Technologies/AbleStock.com/Getty Images)

Cascading Style Sheets, ou CSS, pode definir a posição de uma imagem em uma página da Web. O CSS utiliza o atributo "posição" para descrever como os objetos estão dispostos em uma página; os métodos de posicionamento mais comuns são: estático, fixo, absoluto e relativo. Quando uma imagem está em posição fixa, ela nunca se move da sua localização no site, mesmo quando o usuário rola a janela para cima ou para baixo. Você pode usar uma combinação de HTML e CSS para fixar uma imagem em qualquer lugar de um site.

Nível de dificuldade:
Fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Adicione "<style>" e "</style>" entre as tags "<head>" e "</head>" no código da página, para que o HTML se assemelhe ao seguinte:

    <head> <style> </style> </head>

  2. 2

    Adicione ".overlay { }" entre as tags "<style>" e "</style>", então adicione "position: fixed;" entre as chaves:

    .overlay { position: fixed; }

  3. 3

    Insira a localização desejada para a imagem utilizando os atributos "left" (esquerda) e "top" (topo). "Left" move a imagem para a direita o número especificado de pixels; "top" move a imagem página abaixo o número especificado de pixels. Por exemplo:

    .overlay { position: fixed; top: 20px; left: 300px; }

  4. 4

    Adicione a tag "<img>" entre as tags "<body>" e "</body>" para sobrepor a imagem na página. Insira o "src" e o atributo "class" dentro da tag "<img>":

    <img src="" class="">

  5. 5

    Insira o endereço URL da imagem entre as aspas do campo "src". Insira "overlay" entre as aspas do campo "id":

    <img src="http://my website/picture.jpg" class="overlay">

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