{"id":38241,"date":"2025-08-22T14:44:33","date_gmt":"2025-08-22T17:44:33","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&#038;p=38241"},"modified":"2025-08-22T14:44:33","modified_gmt":"2025-08-22T17:44:33","slug":"como-colocar-imagem-de-fundo-no-html","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/como-colocar-imagem-de-fundo-no-html\/","title":{"rendered":"CSS Background: como colocar imagem de fundo no HTML"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Inserir uma imagem de fundo \u00e9 um recurso muito utilizado em sites, j\u00e1 que permite personalizar p\u00e1ginas, destacar informa\u00e7\u00f5es e criar uma experi\u00eancia visual mais agrad\u00e1vel. Aprenda <\/span><b>como colocar imagem de fundo no HTML<\/b><span style=\"font-weight: 400;\"> via CSS, com passo a passo e exemplos claros e pr\u00e1ticos.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Passo a passo para adicionar uma imagem de fundo no HTML com CSS<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Adicionar uma imagem de fundo em uma p\u00e1gina HTML via CSS \u00e9 simples, mas requer aten\u00e7\u00e3o \u00e0 estrutura do c\u00f3digo e ao caminho correto.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Esse recurso \u00e9 muito utilizado para<\/span><b> personalizar se\u00e7\u00f5es, destacar \u00e1reas espec\u00edficas ou aplicar identidade<\/b><span style=\"font-weight: 400;\"> visual ao site. A propriedade principal usada para isso \u00e9 a <\/span><b>background-image<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O primeiro passo \u00e9 garantir que a imagem est\u00e1 acess\u00edvel no projeto. Ela pode estar em uma pasta local (como <\/span><b>img\/<\/b><span style=\"font-weight: 400;\">) ou hospedada em um link externo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A seguir, veja como aplicar a imagem de fundo com os diferentes m\u00e9todos de uso do <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/css\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">CSS<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-38243\" src=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1.png\" alt=\"\" width=\"942\" height=\"440\" srcset=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1.png 942w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1-300x140.png 300w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1-768x359.png 768w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1-50x23.png 50w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1-60x28.png 60w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image1-100x47.png 100w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">M\u00e9todo com CSS inline (n\u00e3o recomendado para grandes projetos)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Este m\u00e9todo aplica o estilo diretamente na tag <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/html-guia-completo-sobre-a-principal-linguagem-da-internet\/\"><span style=\"font-weight: 400;\">HTML<\/span><\/a><span style=\"font-weight: 400;\">. Ele<\/span><b> funciona para testes r\u00e1pidos<\/b><span style=\"font-weight: 400;\">, mas n\u00e3o \u00e9 ideal para manuten\u00e7\u00e3o ou projetos mais robustos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">&lt;div style=\"background-image: url('img\/fundo.jpg'); width: 100%; height: 300px;\"&gt;<\/span><\/i><\/pre>\n<p><i><span style=\"font-weight: 400;\">\u00a0\u00a0Conte\u00fado aqui<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Neste caso:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a propriedade<\/span><b> background-image<\/b><span style=\"font-weight: 400;\"> recebe a URL da imagem;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00e9 necess\u00e1rio definir largura e altura, sen\u00e3o o fundo pode n\u00e3o aparecer;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">o estilo fica acoplado ao HTML, o que prejudica a organiza\u00e7\u00e3o do c\u00f3digo.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">M\u00e9todo com CSS interno (por meio da tag &lt;style&gt;)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ideal para<\/span><b> p\u00e1ginas simples ou testes locais<\/b><span style=\"font-weight: 400;\">, o CSS interno fica dentro da pr\u00f3pria p\u00e1gina HTML. Veja o exemplo.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;html lang=\"pt-br\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;head&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;title&gt;Exemplo com CSS interno&lt;\/title&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;style&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0.fundo {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/style&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;body&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"fundo\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0Conte\u00fado com fundo de imagem<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/i>\r\n\r\n<span style=\"font-weight: 400;\">Explica\u00e7\u00e3o:<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a tag<\/span> <span style=\"font-weight: 400;\">&lt;style&gt; deve estar dentro da se\u00e7\u00e3o &lt;head&gt;;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a imagem \u00e9 aplicada em uma classe chamada .fundo, que pode ser usada em qualquer elemento;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">o HTML fica mais limpo do que no m\u00e9todo inline.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">M\u00e9todo com CSS externo (mais indicado)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Este \u00e9 o formato mais recomendado para projetos reais. O CSS \u00e9 separado do HTML, o que<\/span><b> facilita a manuten\u00e7\u00e3o e reaproveitamento<\/b><span style=\"font-weight: 400;\"> do c\u00f3digo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo (HTML):<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;html lang=\"pt-br\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;head&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;title&gt;Exemplo com CSS externo&lt;\/title&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"estilo.css\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;body&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"fundo\"&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0Conte\u00fado com imagem de fundo<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Exemplo CSS (arquivo estilo.css):<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.fundo {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0width: 100%;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0height: 300px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Para explicar:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">o HTML referencia o arquivo externo com &lt;link rel=&#8221;stylesheet&#8221;&gt;;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a imagem \u00e9 aplicada da mesma forma, mas o c\u00f3digo fica organizado e reutiliz\u00e1vel;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">o caminho da imagem precisa estar correto em rela\u00e7\u00e3o ao arquivo CSS, n\u00e3o ao HTML.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Todos os m\u00e9todos usam a propriedade <\/span><b>background-image<\/b><span style=\"font-weight: 400;\">, que \u00e9 respons\u00e1vel por aplicar a imagem ao elemento desejado.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O mais indicado, especialmente em projetos maiores, \u00e9 usar<\/span><b> CSS externo<\/b><span style=\"font-weight: 400;\">. Ele permite controlar estilos de v\u00e1rias p\u00e1ginas com um \u00fanico arquivo, facilita manuten\u00e7\u00f5es futuras e melhora a performance do c\u00f3digo.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Como evitar a repeti\u00e7\u00e3o da imagem de fundo?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Por padr\u00e3o, ao aplicar uma imagem de fundo com CSS, ela \u00e9<\/span><b> automaticamente repetida tanto na horizontal quanto na vertical para preencher todo o espa\u00e7o <\/b><span style=\"font-weight: 400;\">do elemento. Mas esse pode n\u00e3o ser o comportamento desejado, principalmente ao usar uma imagem \u00fanica de destaque, como um banner ou uma ilustra\u00e7\u00e3o decorativa.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para controlar esse comportamento, usa-se a propriedade <\/span><b>background-repeat<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-38244\" src=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2.png\" alt=\"\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2.png 1024w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-300x300.png 300w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-150x150.png 150w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-768x768.png 768w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-50x50.png 50w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-60x60.png 60w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/08\/image2-100x100.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">background-repeat: no-repeat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Se a ideia for exibir a imagem apenas uma vez, sem repetir, essa \u00e9 a op\u00e7\u00e3o ideal.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.banner {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/banner.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0width: 100%;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0height: 300px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Assim, a imagem <\/span><b>aparece uma \u00fanica vez no canto superior esquerdo<\/b><span style=\"font-weight: 400;\"> (posi\u00e7\u00e3o padr\u00e3o) e o restante do fundo permanece vazio ou com a cor definida.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Outras op\u00e7\u00f5es de repeti\u00e7\u00e3o<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade<\/span> <span style=\"font-weight: 400;\">background-repeat tamb\u00e9m permite controlar a repeti\u00e7\u00e3o apenas em uma dire\u00e7\u00e3o.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-x<\/b><span style=\"font-weight: 400;\">: repete a imagem apenas na horizontal;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-y<\/b><span style=\"font-weight: 400;\">: repete a imagem apenas na vertical.<\/span><span style=\"font-weight: 400;\">\n<p><\/span><\/li>\n<\/ul>\n<pre><i><span style=\"font-weight: 400;\">.horizontal {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/linha.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: repeat-x;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">.vertical {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/listra.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: repeat-y;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Essas op\u00e7\u00f5es s\u00e3o \u00fateis em casos como divisores de se\u00e7\u00e3o ou bordas decorativas.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">space e round<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Confira outras duas op\u00e7\u00f5es menos comuns, mas importantes.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>space<\/b><span style=\"font-weight: 400;\">: distribui a imagem repetida com espa\u00e7os iguais entre elas;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>round<\/b><span style=\"font-weight: 400;\">: redimensiona a imagem para que ela se ajuste perfeitamente ao espa\u00e7o, ao criar repeti\u00e7\u00f5es se necess\u00e1rio.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Exemplos:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.espacada {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/padrao.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: space;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">.ajustada {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/padrao.png');<\/span><\/i>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\">\u00a0background-repeat: round;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Esses valores oferecem<\/span><b> controle mais preciso em layouts decorativos<\/b><span style=\"font-weight: 400;\"> ou padr\u00f5es gr\u00e1ficos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Com background-repeat, \u00e9 poss\u00edvel evitar repeti\u00e7\u00f5es indesejadas ou aplicar efeitos visuais personalizados de forma simples e eficiente.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Como definir a posi\u00e7\u00e3o do segundo plano?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A propriedade background-position \u00e9 usada para<\/span><b> definir exatamente onde a imagem de fundo ser\u00e1 exibida<\/b><span style=\"font-weight: 400;\"> dentro do elemento. Ela \u00e9 essencial para garantir que a parte mais importante da imagem esteja vis\u00edvel, principalmente ao utilizar imagens de destaque, como banners ou elementos gr\u00e1ficos decorativos.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Sintaxe b\u00e1sica e valores simples<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os valores mais comuns usados com background-position s\u00e3o palavras-chave que indicam a posi\u00e7\u00e3o, conforme o exemplo.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.caixa {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: top;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Outros valores poss\u00edveis:<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>top left<\/b><span style=\"font-weight: 400;\"> (ou apenas<\/span><b> top<\/b><span style=\"font-weight: 400;\">);<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>top center;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>top right;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>center left;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>center center;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>center right;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>bottom left;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>bottom center;<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>bottom right.<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Essas combina\u00e7\u00f5es ajudam a centralizar ou alinhar a imagem no canto desejado do elemento.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Valores com porcentagem ou pixels<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Tamb\u00e9m \u00e9 poss\u00edvel definir posi\u00e7\u00f5es com valores mais precisos, por meio de unidades como <\/span><b>%<\/b><span style=\"font-weight: 400;\"> ou <\/span><b>px<\/b><span style=\"font-weight: 400;\">. Veja:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.personalizado {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: 50% 20px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Nesse exemplo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>50%<\/b><span style=\"font-weight: 400;\"> posiciona horizontalmente a imagem no centro do elemento;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>20px<\/b><span style=\"font-weight: 400;\"> posiciona verticalmente 20 pixels a partir do topo.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Essa configura\u00e7\u00e3o d\u00e1 mais controle quando \u00e9 necess\u00e1rio alinhar a imagem com outros elementos da interface.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Destaque visual com background-position<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A posi\u00e7\u00e3o do fundo <\/span><b>pode influenciar diretamente na composi\u00e7\u00e3o visual <\/b><span style=\"font-weight: 400;\">do site. Por exemplo, ao usar uma imagem de produto ou pessoa, pode-se posicionar o foco da imagem no centro da tela, para que o destaque fique bem vis\u00edvel em diferentes tamanhos de tela.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.destaque {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/produto.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: center center;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Usar background-position de forma estrat\u00e9gica <\/span><b>ajuda a manter a est\u00e9tica e a legibilidade <\/b><span style=\"font-weight: 400;\">do conte\u00fado, mesmo em layouts responsivos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Propriedades complementares para ajustar a imagem de fundo<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Al\u00e9m de definir a imagem com background-image e ajustar sua repeti\u00e7\u00e3o e posi\u00e7\u00e3o, outras propriedades do CSS permitem um controle mais preciso sobre como ela aparece. Assim, \u00e9 poss\u00edvel garantir que a<\/span><b> imagem se encaixe bem em diferentes elementos, propor\u00e7\u00f5es e dispositivos<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A seguir, exploraremos essas propriedades complementares para ajustar o visual de maneira eficiente e responsiva.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">background-size<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade background-size controla o tamanho da imagem aplicada no fundo. Ela \u00e9 essencial para garantir que a<\/span><b> imagem fique proporcional ao elemento<\/b><span style=\"font-weight: 400;\">, sem distor\u00e7\u00f5es ou cortes indesejados.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Valores mais comuns<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O valor <\/span><b>cover<\/b><span style=\"font-weight: 400;\"> redimensiona a imagem para cobrir toda a \u00e1rea do elemento. Ela pode ser cortada para manter a propor\u00e7\u00e3o, e \u00e9 ideal para banners de tela cheia ou fundos que devem preencher o espa\u00e7o visual.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.full {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/banner.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-size: cover;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">J\u00e1 <\/span><b>contain<\/b><span style=\"font-weight: 400;\"> redimensiona a imagem para caber totalmente dentro do elemento. Ela \u00e9 ajustada, mas pode deixar espa\u00e7os vazios se as propor\u00e7\u00f5es forem diferentes. \u00c9 um valor \u00fatil para imagens de logotipo, gr\u00e1ficos e elementos que n\u00e3o podem ser cortados.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.ajustada {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/logo.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-size: contain;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<h4><span style=\"font-weight: 400;\">Tamanhos personalizados<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 poss\u00edvel definir tamanhos exatos com unidades como pixels (<\/span><b>px<\/b><span style=\"font-weight: 400;\">), porcentagem (<\/span><b>%<\/b><span style=\"font-weight: 400;\">) ou at\u00e9 usar dois valores (largura e altura):<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.personalizada {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/textura.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-size: 200px 100px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Essas op\u00e7\u00f5es s\u00e3o \u00fateis quando se precisa de <\/span><b>mais controle sobre a escala da imagem<\/b><span style=\"font-weight: 400;\">, especialmente em padr\u00f5es decorativos ou layouts espec\u00edficos.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">background-repeat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora j\u00e1 tenha sido apresentado anteriormente, vale refor\u00e7ar a import\u00e2ncia do background-repeat como parte da combina\u00e7\u00e3o com outras propriedades.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Usar no-repeat, repeat-x, repeat-y, space ou round em conjunto com background-size permite criar layouts muito mais controlados e visuais agrad\u00e1veis.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.banner {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/banner.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-repeat: no-repeat;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-size: cover;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: center;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Nesse caso, a imagem <\/span><b>cobre todo o elemento, aparece apenas uma vez e est\u00e1 centralizada<\/b><span style=\"font-weight: 400;\">, para manter um fundo bonito em v\u00e1rios tipos de tela.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Controlar a repeti\u00e7\u00e3o \u00e9 essencial para evitar que a imagem se multiplique de forma n\u00e3o intencional, o que pode prejudicar a apar\u00eancia e legibilidade do conte\u00fado.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">background-position<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade background-position define onde a<\/span><b> imagem de fundo ser\u00e1 exibida dentro do elemento<\/b><span style=\"font-weight: 400;\">. Embora j\u00e1 tenhamos visto exemplos visuais, \u00e9 importante compreender os aspectos t\u00e9cnicos dos valores aceitos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Os valores podem ser palavras-chave (<\/span><b>top<\/b><span style=\"font-weight: 400;\">, <\/span><b>right<\/b><span style=\"font-weight: 400;\">, <\/span><b>center<\/b><span style=\"font-weight: 400;\">, <\/span><b>bottom<\/b><span style=\"font-weight: 400;\">,<\/span><b> left<\/b><span style=\"font-weight: 400;\">), unidades de medida (<\/span><b>px<\/b><span style=\"font-weight: 400;\">, <\/span><b>%<\/b><span style=\"font-weight: 400;\">) ou uma combina\u00e7\u00e3o dos dois:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.elemento {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: right bottom;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i>\r\n\r\n<span style=\"font-weight: 400;\">Ou com unidades:<\/span>\r\n\r\n<i><span style=\"font-weight: 400;\">.elemento {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: 30px 60px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">A ordem dos valores importa: o primeiro define a posi\u00e7\u00e3o horizontal, e o segundo, a vertical. Isso garante precis\u00e3o na hora de alinhar a imagem ao conte\u00fado.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">background-attachment<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade <\/span><b>background-attachment<\/b><span style=\"font-weight: 400;\"> define se a imagem de fundo se move com o conte\u00fado da p\u00e1gina ou permanece fixa.<\/span><\/p>\n<h4><b>Valores dispon\u00edveis:<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scroll <\/b><span style=\"font-weight: 400;\">(padr\u00e3o): o fundo rola com o conte\u00fado da p\u00e1gina;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fixed<\/b><span style=\"font-weight: 400;\">: o fundo permanece fixo enquanto o conte\u00fado rola \u2014 cria o efeito conhecido como <\/span><i><span style=\"font-weight: 400;\">parallax<\/span><\/i><span style=\"font-weight: 400;\">;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>local<\/b><span style=\"font-weight: 400;\">: o fundo rola com o conte\u00fado do pr\u00f3prio elemento, caso ele tenha rolagem interna (scroll). Isso \u00e9 \u00fatil para que a imagem acompanhe a rolagem interna, por exemplo.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Exemplo:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.parallax {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-attachment: fixed;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-size: cover;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-position: center;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Esse efeito pode ser aplicado a se\u00e7\u00f5es espec\u00edficas para dar uma<\/span><b> sensa\u00e7\u00e3o de profundidade no design<\/b><span style=\"font-weight: 400;\">. Apesar de ser simples de usar, deve ser testado com aten\u00e7\u00e3o \u00e0 performance em dispositivos m\u00f3veis.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Atalho: background shorthand<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade<\/span><b> background<\/b><span style=\"font-weight: 400;\"> permite agrupar todas as configura\u00e7\u00f5es do fundo em uma \u00fanica linha. Isso economiza c\u00f3digo e melhora a organiza\u00e7\u00e3o do CSS.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Ordem dos valores no shorthand:<\/span><\/h4>\n<ul>\n<li aria-level=\"1\"><b>background-color;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-image;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-position;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-size <\/b><span style=\"font-weight: 400;\">(ap\u00f3s<\/span><b> \/<\/b><span style=\"font-weight: 400;\">);<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-repeat;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-attachment;<\/b><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>background-origin e background-clip <\/b><span style=\"font-weight: 400;\">(opcionais).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Exemplo completo com coment\u00e1rios:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.bloco {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background:\u00a0<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0#ffffff\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* Cor de fundo *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0url('img\/banner.jpg') \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* Imagem de fundo *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0center top \/ cover\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* Posi\u00e7\u00e3o e tamanho *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0no-repeat \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* Repeti\u00e7\u00e3o *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0fixed;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* Comportamento no scroll *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Se precisar incluir background-size, use a barra (\/) para separ\u00e1-lo da posi\u00e7\u00e3o.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Esse atalho \u00e9 \u00fatil em projetos que <\/span><b>exigem organiza\u00e7\u00e3o e consist\u00eancia no c\u00f3digo<\/b><span style=\"font-weight: 400;\">. Mas vale lembrar: usar <\/span><b>background<\/b><span style=\"font-weight: 400;\"> sobrescreve todas as propriedades individuais, ent\u00e3o evite misturar shorthand com declara\u00e7\u00f5es separadas no mesmo seletor para evitar conflitos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Como usar CSS opacity para deixar a imagem transparente<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Aplicar transpar\u00eancia \u00e0 imagem de fundo pode criar efeitos visuais interessantes, como sobrepor texto sobre imagens sem comprometer a leitura. No CSS, isso \u00e9 feito com a propriedade<\/span><b> opacity<\/b><span style=\"font-weight: 400;\">, mas h\u00e1 algumas particularidades importantes que precisam ser consideradas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A maneira mais direta de deixar qualquer elemento (inclusive o fundo) transparente \u00e9 com a propriedade<\/span><b> opacity<\/b><span style=\"font-weight: 400;\">. Ela aceita valores de 0 a 1, em que 0 representa totalmente transparente e 1, totalmente opaco:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.fundo-transparente {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.5;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">No entanto, usar <\/span><b>opacity<\/b><span style=\"font-weight: 400;\"> dessa forma afeta o elemento inteiro, ou seja, todo o conte\u00fado dentro dele tamb\u00e9m ficar\u00e1 transparente. Isso pode prejudicar a visibilidade de textos, bot\u00f5es e outros elementos.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Limita\u00e7\u00f5es ao usar opacity diretamente no background<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A maior limita\u00e7\u00e3o do uso direto da propriedade opacity \u00e9 que ela <\/span><b>n\u00e3o atua exclusivamente sobre o background-image<\/b><span style=\"font-weight: 400;\">. Como o valor \u00e9 aplicado ao elemento como um todo, qualquer conte\u00fado interno ser\u00e1 igualmente afetado.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.aviso {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/alerta.png');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.3;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0color: #000;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Nesse exemplo, o texto \u201caviso\u201d tamb\u00e9m ficar\u00e1 com 30% de opacidade, o que pode dificultar a leitura.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por isso, quando o objetivo \u00e9 deixar apenas a imagem de fundo mais clara ou sutil sem interferir no conte\u00fado, o ideal \u00e9 adotar solu\u00e7\u00f5es alternativas \u2014 como o uso de pseudo-elementos (::before ou ::after) ou o uso de cores com transpar\u00eancia via rgba(), que veremos a seguir.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essas abordagens permitem <\/span><b>aplicar efeitos de transpar\u00eancia ao fundo sem prejudicar o restante <\/b><span style=\"font-weight: 400;\">do layout ou acessibilidade da p\u00e1gina.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Alterar a opacidade do background com rgba<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Uma forma eficiente de aplicar transpar\u00eancia apenas ao fundo, sem afetar o conte\u00fado do elemento, \u00e9 utilizar cores no formato <\/span><b>rgba()<\/b><span style=\"font-weight: 400;\">. Esse formato permite definir a cor e o n\u00edvel de opacidade de forma direta.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A sigla <\/span><b>rgba <\/b><span style=\"font-weight: 400;\">significa: red, green, blue, alpha, com <\/span><b>alpha<\/b><span style=\"font-weight: 400;\"> como valor de transpar\u00eancia. O valor vai de 0 (totalmente transparente) a 1 (totalmente opaco).<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.fundo-claro {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: rgba(0, 0, 0, 0.3); \/* Preto com 30% de opacidade *\/<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0color: #fff;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0padding: 20px;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Esse m\u00e9todo \u00e9 ideal quando o plano de fundo \u00e9 uma cor s\u00f3lida. Ele preserva a opacidade do fundo sem interferir na opacidade de textos ou outros elementos dentro do bloco.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se a inten\u00e7\u00e3o for usar uma imagem de fundo transl\u00facida, o rgba() <\/span><b>pode ser combinado com t\u00e9cnicas <\/b><span style=\"font-weight: 400;\">como sobreposi\u00e7\u00f5es de cor (color overlay) para suavizar a imagem, j\u00e1 que aplica um fundo semi-transparente por cima da imagem real \u2014 algo muito usado em se\u00e7\u00f5es de destaque.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Usar pseudo-elementos para efeito de transpar\u00eancia<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Quando \u00e9 necess\u00e1rio aplicar transpar\u00eancia somente na imagem de fundo, sem afetar o conte\u00fado do elemento, uma t\u00e9cnica eficaz \u00e9 o uso de pseudo-elementos ::before ou ::after. Com eles, \u00e9 poss\u00edvel<\/span><b> adicionar uma camada separada com opacidade ajust\u00e1vel<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Veja um exemplo pr\u00e1tico:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">.bloco {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0position: relative;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0z-index: 1;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0color: #fff;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">.bloco::before {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0content: \"\";<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.3;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0top: 0;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0right: 0;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0bottom: 0;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0left: 0;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0z-index: -1;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Nesse caso, o pseudo-elemento cria um \u201cfundo transparente\u201d independente do conte\u00fado real. A opacidade \u00e9 aplicada apenas \u00e0 imagem, sem alterar o texto ou os bot\u00f5es dentro do bloco.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essa abordagem \u00e9 muito usada em banners, chamadas visuais ou \u00e1reas de destaque onde o contraste e a legibilidade precisam ser mantidos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Melhores pr\u00e1ticas para imagens de fundo<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Imagens de fundo s\u00e3o \u00f3timos recursos visuais, mas tamb\u00e9m podem comprometer o desempenho do site se n\u00e3o forem usadas com cuidado.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Algumas boas pr\u00e1ticas ajudam a<\/span><b> manter o equil\u00edbrio entre est\u00e9tica, velocidade de carregamento e responsividade<\/b><span style=\"font-weight: 400;\"> \u2014 aspectos fundamentais para uma boa experi\u00eancia de quem acessa a p\u00e1gina.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o para carregamento r\u00e1pido<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Imagens pesadas deixam o site lento e afetam tanto a navega\u00e7\u00e3o quanto o ranqueamento em mecanismos de busca. Por isso, a otimiza\u00e7\u00e3o \u00e9 essencial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Uma das primeiras a\u00e7\u00f5es \u00e9 comprimir as imagens, sem perda significativa de qualidade. Ferramentas como TinyPNG, Squoosh ou ImageOptim s\u00e3o \u00f3timas op\u00e7\u00f5es para isso.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Outra t\u00e9cnica importante \u00e9 o lazy loading, que <\/span><b>adia o carregamento de imagens at\u00e9 que elas estejam prestes a aparecer <\/b><span style=\"font-weight: 400;\">na tela. Embora essa t\u00e9cnica seja mais comum em imagens HTML (&lt;img&gt;), ela tamb\u00e9m pode ser aplicada com CSS via JavaScript ou frameworks modernos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, hospedar imagens em uma CDN (Content Delivery Network) <\/span><b>acelera o carregamento ao distribuir os arquivos em servidores espalhados<\/b><span style=\"font-weight: 400;\"> geograficamente e garante que quem acessa o site baixe os recursos do ponto mais pr\u00f3ximo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Escolha do formato ideal (JPEG, PNG, WebP)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A escolha do formato da imagem afeta diretamente tanto a qualidade quanto o desempenho. Veja os formatos mais usados para fundos.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JPEG<\/b><span style=\"font-weight: 400;\">: ideal para fotos e imagens com muitos detalhes. Ele tem boa compress\u00e3o e peso reduzido, mas n\u00e3o suporta transpar\u00eancia;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PNG<\/b><span style=\"font-weight: 400;\">: suporta fundo transparente e \u00e9 ideal para imagens com poucos detalhes ou elementos gr\u00e1ficos como \u00edcones e logotipos. Por\u00e9m, ele costuma ter um tamanho maior;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>WebP<\/b><span style=\"font-weight: 400;\">: mais moderno, o WebP oferece alta compress\u00e3o com boa qualidade, superior ao JPEG e PNG em muitos casos. Navegadores modernos j\u00e1 oferecem suporte ao formato.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A recomenda\u00e7\u00e3o \u00e9 <\/span><b>priorizar o uso de WebP<\/b><span style=\"font-weight: 400;\"> sempre que poss\u00edvel, e manter vers\u00f5es alternativas em JPEG ou PNG para garantir compatibilidade com navegadores mais antigos.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Imagens responsivas e media queries<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Para que o<\/span><b> fundo se adapte bem a diferentes tamanhos <\/b><span style=\"font-weight: 400;\">de tela, o uso de media queries no CSS \u00e9 essencial. Essa t\u00e9cnica permite alterar a imagem, o tamanho ou at\u00e9 remover o background em telas menores.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Exemplo pr\u00e1tico:<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">body {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background-image: url('img\/fundo-desktop.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">@media (max-width: 768px) {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0body {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-image: url('img\/fundo-mobile.jpg');<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Tamb\u00e9m \u00e9 poss\u00edve<\/span><b>l ajustar o background-size e background-position com base no tamanho da tela<\/b><span style=\"font-weight: 400;\">. Isso garante que a imagem n\u00e3o fique distorcida ou mal posicionada.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Outra dica \u00e9 testar a legibilidade do conte\u00fado sobre a imagem em diferentes resolu\u00e7\u00f5es. Para isso, verifique se o contraste e o layout funcionam bem em monitores grandes e dispositivos m\u00f3veis. Assim, os textos n\u00e3o sobrep\u00f5em \u00e1reas da imagem.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">O que \u00e9 a propriedade background no CSS?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A propriedade background no CSS \u00e9 uma forma abreviada (shorthand) que permite configurar<\/span><b> v\u00e1rias caracter\u00edsticas do plano de fundo de um elemento em uma \u00fanica linha<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Com ela, \u00e9 poss\u00edvel definir a cor de fundo, a imagem, a posi\u00e7\u00e3o, a repeti\u00e7\u00e3o, o tamanho e o comportamento de rolagem (attachment) de forma pr\u00e1tica e direta.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essa propriedade agrupa os seguintes valores, geralmente nesta ordem:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-color<\/b><span style=\"font-weight: 400;\"> (cor de fundo);<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-image<\/b><span style=\"font-weight: 400;\"> (imagem de fundo);<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-position<\/b><span style=\"font-weight: 400;\"> (posi\u00e7\u00e3o da imagem);<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-size<\/b><span style=\"font-weight: 400;\"> (tamanho da imagem \u2014 opcional, com <\/span><b>\/<\/b><span style=\"font-weight: 400;\">);<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-repeat<\/b><span style=\"font-weight: 400;\"> (repeti\u00e7\u00e3o);<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-attachment<\/b><span style=\"font-weight: 400;\"> (comportamento na rolagem);<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Veja um exemplo pr\u00e1tico que combina esses valores.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">body {<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\u00a0\u00a0background: #f0f0f0 url('paisagem.jpg') no-repeat center\/cover fixed;<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">}<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">Nesse exemplo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>#f0f0f0<\/b><span style=\"font-weight: 400;\"> define a cor de fundo;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>url(&#8216;paisagem.jpg&#8217;)<\/b><span style=\"font-weight: 400;\"> insere a imagem;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>no-repeat<\/b><span style=\"font-weight: 400;\"> impede a repeti\u00e7\u00e3o da imagem;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>center\/cover<\/b><span style=\"font-weight: 400;\"> posiciona a imagem ao centro e a redimensiona para cobrir todo o elemento;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fixed<\/b><span style=\"font-weight: 400;\"> mant\u00e9m a imagem fixa no fundo, enquanto o conte\u00fado rola.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u00c9 importante lembrar que todos esses valores podem ser definidos separadamente, mas o uso do shorthand<\/span><b> background ajuda a deixar o c\u00f3digo mais limpo e leg\u00edvel<\/b><span style=\"font-weight: 400;\">, especialmente quando todas as propriedades s\u00e3o usadas em conjunto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se algum dos valores n\u00e3o for informado no shorthand, ele ser\u00e1 considerado padr\u00e3o. Por isso, \u00e9 necess\u00e1rio ter aten\u00e7\u00e3o para n\u00e3o sobrescrever ou esquecer alguma configura\u00e7\u00e3o importante ao usar essa forma compacta.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ap\u00f3s explorar recursos b\u00e1sicos at\u00e9 os avan\u00e7ados, voc\u00ea j\u00e1 sabe <\/span><b>como colocar imagem de fundo no HTML<\/b><span style=\"font-weight: 400;\"> por meio do CSS. Voc\u00ea tamb\u00e9m aprendeu a aplicar imagens com diferentes tipos de CSS, controlar repeti\u00e7\u00e3o, posi\u00e7\u00e3o, tamanho e at\u00e9 adicionar efeitos de transpar\u00eancia com t\u00e9cnicas modernas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dominar a propriedade background \u00e9 essencial para criar<\/span><b> interfaces visuais mais atrativas e responsivas<\/b><span style=\"font-weight: 400;\">. Al\u00e9m de valorizar o design, o uso inteligente do background <\/span><b>impacta a performance e a experi\u00eancia de quem acessa<\/b><span style=\"font-weight: 400;\"> o site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para fixar o aprendizado, vale a pena praticar com pequenos projetos: criar uma landing page com imagem de fundo, simular banners com diferentes tamanhos ou adaptar um layout responsivo com media queries.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A pr\u00e1tica \u00e9 o caminho para se tornar confiante com CSS!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">E se voc\u00ea busca uma boa <\/span><a href=\"https:\/\/www.locaweb.com.br\/hospedagem-de-sites-com-dominio-gratis\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">hospedagem de sites<\/span><\/a><span style=\"font-weight: 400;\"> para seu projeto, conhe\u00e7a agora mesmo as solu\u00e7\u00f5es da Locaweb!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inserir uma imagem de fundo \u00e9 um recurso muito utilizado em sites, j\u00e1 que permite personalizar p\u00e1ginas, destacar informa\u00e7\u00f5es e criar uma experi\u00eancia visual mais agrad\u00e1vel. Aprenda como colocar imagem de fundo no HTML via CSS, com passo a passo e exemplos claros e pr\u00e1ticos.\u00a0 Passo a passo para adicionar&#8230;<\/p>\n","protected":false},"author":48,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[119],"ht-kb-tag":[],"class_list":["post-38241","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-hospedagem-de-sites"],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/38241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/comments?post=38241"}],"version-history":[{"count":1,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/38241\/revisions"}],"predecessor-version":[{"id":38245,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/38241\/revisions\/38245"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/media?parent=38241"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-category?post=38241"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-tag?post=38241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}