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-imageQuantidade 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> |
![]() |
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 CSSQuantidade 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 rgbQuantidade 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 displayQuantidade 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 |
![]() 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 |
![]() 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 |