Você está aqui: CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo

Como definir uma imagem de fundo para a página HTML em CSS usando a propriedade background-image

Quantidade de visualizações: 8131 vezes
Nesta dica mostrarei como usar a propriedade background-image do CSS (Cascading Style Sheet) para aplicar uma imagem de fundo às nossas páginas HTML. Note que, neste exemplo, não controlamos como e se a imagem de fundo será repetida. Em outras dicas dessa seção você aprenderá como isso pode ser feito.

Veja o resultado desta dica na figura abaixo:



E agora veja o código HTML completo para o exemplo, incluindo a marcação CSS:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando CSS</title>

<meta name="viewport" content="width=device-width, 
  initial-scale=1">

<style type="text/css">
  body {background-image: url('fundo2.jpg')}
</style>

</head>
<body>
 
</body>
</html>


Link para compartilhar na Internet ou com seus amigos:

CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo

Como definir uma imagem de fundo para um botão HTML usando a propriedade background-image do CSS

Quantidade de visualizações: 9491 vezes
Nesta dica mostrarei como podemos usar a propriedade background-image do CSS para aplicar uma imagem de fundo a elemento <button> do HTML. Vamos ver duas abordagens. Na primeira abordagem usaremos CSS inline. Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Estudos CSS</title>
</head>
  
<body>

<button style="background-image: url('fundo.jpg')">
 Clique aqui</button>
  
</body>
</html>

Agora veja a mesma técnica usando um bloco CSS na seção <head> da página HTML e definindo um id para o botão:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Estudos CSS</title>

<style>
  #botao{
    background-image: url('fundo.jpg');
  }
</style>

</head>
  
<body>

<button id="botao">Clique aqui</button>
  
</body>
</html>



CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo

Apostila CSS - Como definir a cor de fundo de um elemento HTML usando um valor rgb

Quantidade de visualizações: 7258 vezes
A propriedade background-color aceita um valor de cor que pode ser informado por meio da função rgb(). Esta função aceita valores de 0 até 255 para a cores vermelho, verde e azul, ou seja Red, Green e Blue.

Veja a figura abaixo:



A cor de fundo para esta página for gerada com o seguinte código:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando CSS</title>

<meta name="viewport" content="width=device-width, 
  initial-scale=1">

</head>
<body style="background-color: rgb(201, 20, 58)">
 
</body>
</html>



CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns

Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade display

Quantidade de visualizações: 480 vezes
Nesta dica mostrarei como podemos criar uma barra de menus horizontal usando CSS. Para isso cada item de menu será um elemento <li>, contidos dentro de um elemento <ul>. O truque é definir o valor inline-block para a propriedade display de cada elemento <li>.

Veja a página HTML e CSS completa para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Estudos CSS</title>
  
<style>
  #menu{
    background-color: #eeeeee; 
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  #menu li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
    text-decoration: none;
  }
  
  #menu li a{
    text-decoration: none;
  }
</style>

</head>
  
<body>

<h1>Exemplo de Barra de Menu Horizontal</h1>

<p>Veja como podemos usar o valor inline-block para
  a propriedade display do CSS para criar uma barra
  de menu na horizontal</p>

<ul id="menu">
  <li><a href="index.php">Início</a></li>
  <li><a href="servicos.php">Serviços</a></li>
  <li><a href="produtos.php">Produtos</a></li>  
  <li><a href="contatos.php">Contatos</a></li>
</ul>
  
</body>
</html>



Veja mais Dicas e truques de CSS

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 33 usuários muito felizes estudando em nosso site.