Busca avançada Meus favoritos Como criar site grátis em PHP, HTML, CSS, JS ...
Postes RECENTES
Categorias
Ultimos posts
- background-image css
- tooltip jquery
- editor de imagens online
- 60 belas texturas
- belas texturas gratis
- Calcular frete em ASP
- variaveis php existe
- redirecionar site php
- remover espaços de string
- gerador de layout css
- máscara javascript
- estrutura condicional
- teclado virtual
- crie imagem loading
- personalizar curso mouse
background-image css
Iremos aprender neste mini tutorial como inserir imagem como background usando o CSS.
O código para inserir uma imagem como background é esse aqui:
<style type="text/css">
body { background-image: url("/images/css.gif");}
</style>
Image repeat - repetir imagem na vertical ou na horizontal
Por padrão a imagem de background irá repetir na vertical e na horizontal. Para impedir que a imagem de background, ou de fundo, se repetir usamos esse código:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: no-repeat;
</style>
Desta forma a imagem irá aparecer uma única vez.
Para a imagem de background repetir somente na vertical o código é esse aqui:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: repeat-y;
</style>
Para a imagem de background repetir somente na horizontal o código é esse aqui:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: repeat-x;
</style>
background-position
Podemos ainda posicionar a imagem de background facilmente com css. Vamos posicionar o background no canto superior direito:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: no-repeat;
background-position: top right;
</style>
A imagem de foi posicionada no canto superior da margem direita.
Podemos ainda posicionar a imagem a uma certa distância das margens, para fazer isso usamos o código:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: no-repeat;
background-position: 250px 50px;
</style>
Com o código acima a imagem de background ficou posicionada 250px da margem esquerda e 50px da margem superior.
background-attachment
Com css podemos fixar a imagem de background na tela. Com a imagem fixa, ao usarmos o scroll a imagem não "rola" junto com a página, veja:
<style type="text/css">
body { background-image: url("/images/css.gif");}
background-repeat: no-repeat;
background-attachment: fixed;
</style>
Para a imagem "rolar" junto com a página não há necessidade de usar o código: background-attachment: scroll uma vez que esse é o padrão.
Propriedades css usadas
background-image
background-repeat
background-position
background-attachment
Até a próxima, qualquer dúvida use os comentários para perguntar.
MATERIAS RELACIONADAS
- O que são tags HTML e como usa-las corretamente
- 60 belas texturas gratuita para download
- site para busca de icones gratis
- Serviço gratuito de calculo de frete de sedex e pac ganha adesão da comunidade web
Comentários
Por: Regina - em: 14/02/2011 - as: 04:15:07Inseri um gif como plano de fundo no site. Usei o codigo:
Centrar uma página com CSS
body {
margin:0;
padding:0;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
}
Pagina Centrada com CSS sem scroll ate 800x600
Não use nenhum elemento HTML
(figuras, tabelas, etc...) com largura
superior a 750px.
O que eu gostaria de saber é como faço para colocar uma cor diferente do lado de fora da centralização. Ou seja, ficará com duas cores já que o fundo do gif é transparente. Alquém pode me ajudar? Obrigada.
DEIXE SEU COMENTÁRIO
