{"id":123728,"date":"2025-03-03T08:19:01","date_gmt":"2025-03-03T06:19:01","guid":{"rendered":"https:\/\/elementor.com\/blog\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/"},"modified":"2026-01-09T13:40:23","modified_gmt":"2026-01-09T11:40:23","slug":"propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/","title":{"rendered":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"123728\" class=\"elementor elementor-123728 elementor-94882\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4526217 e-flex e-con-boxed e-con e-parent\" data-id=\"4526217\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b518e1a elementor-widget elementor-widget-text-editor\" data-id=\"b518e1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Neste guia abrangente, adentraremos o universo das imagens de fundo CSS, explorando desde os fundamentos at\u00e9 as t\u00e9cnicas avan\u00e7adas. Independentemente de ser um desenvolvedor web experiente ou iniciante, voc\u00ea descobrir\u00e1 como:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Selecionar os formatos de imagem apropriados<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Controlar o ladrilhamento e a repeti\u00e7\u00e3o de imagens<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dominar o posicionamento preciso<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Criar efeitos fixos e de paralaxe<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sobrepor m\u00faltiplas imagens<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utilizar gradientes para fundos din\u00e2micos<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Otimizar imagens para tempos de carregamento excepcionalmente r\u00e1pidos<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea est\u00e1 pronto para elevar seus designs de website, vamos mergulhar!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Os Fundamentos das Imagens de Fundo CSS <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Iniciemos compreendendo os conceitos e propriedades fundamentais que controlam como as imagens de fundo s\u00e3o exibidas.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">A Propriedade <\/span><span style=\"font-weight: 400;\">background-image<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O cerne da implementa\u00e7\u00e3o de imagens de fundo <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20255\">CSS<\/a> \u00e9 a <\/span><span style=\"font-weight: 400;\">imagem de fundo<\/span><span style=\"font-weight: 400;\"> . \u00c9 aqui que voc\u00ea informa ao navegador qual arquivo de imagem utilizar como seu fundo. Eis a sintaxe b\u00e1sica:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c36267d elementor-widget elementor-widget-code-highlight\" data-id=\"c36267d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nselector {\r\n  background-image: url('path\/to\/your\/image.jpg'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-635589b elementor-widget elementor-widget-text-editor\" data-id=\"635589b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Seletor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Este \u00e9 o elemento HTML onde voc\u00ea deseja que a imagem de fundo apare\u00e7a (por exemplo, <\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">, uma <\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> espec\u00edfica, etc.).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">url()<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Esta fun\u00e7\u00e3o especifica a localiza\u00e7\u00e3o da imagem. O caminho pode ser:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relativo:<\/b><span style=\"font-weight: 400;\"> Relativo \u00e0 localiza\u00e7\u00e3o do seu arquivo CSS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Absoluto:<\/b><span style=\"font-weight: 400;\"> Um endere\u00e7o web completo, incluindo o protocolo (http:\/\/ ou https:\/\/).<\/span><\/li>\n<\/ul>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3562e4 elementor-widget elementor-widget-code-highlight\" data-id=\"a3562e4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  background-image: url('\/images\/background.png'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44d855e elementor-widget elementor-widget-text-editor\" data-id=\"44d855e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Observa\u00e7\u00e3o Importante:<\/b><span style=\"font-weight: 400;\"> Sempre encapsule a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &amp; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"33293\">URL<\/a> da sua imagem entre aspas simples ou duplas para garantir a interpreta\u00e7\u00e3o adequada pelo navegador.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Formatos de Arquivo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os navegadores web support uma variedade de formatos de imagem, mas os mais comuns para fundos s\u00e3o:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JPEG (ou JPG): <\/b><span style=\"font-weight: 400;\">\u00e9 ideal para fotografias ou imagens com cores complexas e gradientes. Oferece boa compress\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PNG:<\/b><span style=\"font-weight: 400;\"> Excelente para imagens com transpar\u00eancia ou quando necessita-se de compress\u00e3o sem perdas (logotipos, gr\u00e1ficos).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>GIF:<\/b><span style=\"font-weight: 400;\"> Utilizado para anima\u00e7\u00f5es simples, mas geralmente menos adequado para imagens de fundo grandes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SVG:<\/b><span style=\"font-weight: 400;\"> Gr\u00e1ficos Vetoriais Escal\u00e1veis s\u00e3o ideais para \u00edcones, ilustra\u00e7\u00f5es ou padr\u00f5es, pois escalam infinitamente sem perda de qualidade.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>WebP: <\/b><span style=\"font-weight: 400;\">\u00e9 um formato moderno que oferece compress\u00e3o com e sem perdas. \u00c9 frequentemente superior ao JPEG e PNG em tamanho de arquivo, mas possui menor support universal nos navegadores.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">background-repeat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade <\/span><span style=\"font-weight: 400;\">background-repeat<\/span><span style=\"font-weight: 400;\"> determina como uma imagem de fundo \u00e9 ladrilhada ou repetida dentro de seu elemento contentor. Eis os valores poss\u00edveis:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem repete-se tanto horizontalmente quanto verticalmente (comportamento padr\u00e3o).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-x<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem repete-se apenas horizontalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-y<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem repete-se apenas verticalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>no-repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 exibida uma \u00fanica vez sem repeti\u00e7\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>space<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 repetida, e qualquer espa\u00e7o adicional \u00e9 distribu\u00eddo uniformemente entre as imagens.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>round<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 repetida conforme necess\u00e1rio para preencher o espa\u00e7o, mas as imagens s\u00e3o comprimidas ou esticadas para evitar ladrilhos parciais.<\/span><\/li>\n<\/ul>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d8a127 elementor-widget elementor-widget-code-highlight\" data-id=\"3d8a127\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('pattern.png');\r\n    background-repeat: repeat-y; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ca2ae elementor-widget elementor-widget-text-editor\" data-id=\"a5ca2ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Dominando o Dimensionamento de Imagens de Fundo <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">A Propriedade <\/span><span style=\"font-weight: 400;\">background-size<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> controla como uma imagem de fundo \u00e9 escalada para se ajustar dentro de seu contentor. Eis os valores mais comuns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 escalada para cobrir todo o contentor, mantendo sua propor\u00e7\u00e3o. Partes da imagem podem ser cortadas para garantir um ajuste completo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 dimensionada para se ajustar completamente dentro do cont\u00eainer, mantendo sua propor\u00e7\u00e3o. Isto pode deixar espa\u00e7o ao redor da imagem se a propor\u00e7\u00e3o do cont\u00eainer for diferente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>length<\/b><b>:<\/b><span style=\"font-weight: 400;\"> \u00c9 poss\u00edvel especificar uma largura e altura expl\u00edcitas (por exemplo, <\/span><span style=\"font-weight: 400;\">background-size: 200px 150px;<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>percentage<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Dimensiona a imagem em rela\u00e7\u00e3o \u00e0 largura ou altura de seu cont\u00eainer (por exemplo, <\/span><span style=\"font-weight: 400;\">background-size: 50% auto;<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<\/ul>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4984a1d elementor-widget elementor-widget-code-highlight\" data-id=\"4984a1d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n    background-image: url('landscape. jpg');\r\n    background-size: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-505d24b elementor-widget elementor-widget-text-editor\" data-id=\"505d24b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Imagens de Fundo Responsivas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">No design web moderno, a responsividade \u00e9 essencial. Aqui est\u00e1 como garantir que as imagens de fundo se adaptem bem em diferentes tamanhos de tela:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Unidades Flex\u00edveis:<\/b><span style=\"font-weight: 400;\"> Utilize <\/span><span style=\"font-weight: 400;\">percentage<\/span><span style=\"font-weight: 400;\"> ou unidades de viewport (<\/span><span style=\"font-weight: 400;\">vw<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">vh<\/span><span style=\"font-weight: 400;\">) dentro da propriedade <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> para permitir que a imagem redimensione de forma fluida.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Media Queries:<\/b><span style=\"font-weight: 400;\"> Empregue media queries CSS para aplicar diferentes valores de <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> (ou at\u00e9 mesmo diferentes imagens de fundo) baseados no tamanho da tela ou orienta\u00e7\u00e3o do dispositivo.<\/span><\/li>\n<\/ul>\n<p><b>Exemplo (Media Query):<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab0edb8 elementor-widget elementor-widget-code-highlight\" data-id=\"ab0edb8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@media (max-width: 768px) {\r\n    body {\r\n        background-image: url('landscape-mobile.jpg'); \r\n        background-size: contain; \r\n    }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab6941 elementor-widget elementor-widget-text-editor\" data-id=\"4ab6941\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Posicionamento Preciso de Imagens de Fundo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">A Propriedade <\/span><span style=\"font-weight: 400;\">background-position<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">  proporciona um controle granular sobre onde uma imagem de fundo \u00e9 posicionada dentro de seu cont\u00eainer. Ela aceita valores em v\u00e1rios formatos:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Palavras-chave<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">top<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">bottom<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">right<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">center<\/span><span style=\"font-weight: 400;\"> (posiciona a imagem em rela\u00e7\u00e3o \u00e0s bordas)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Combina\u00e7\u00f5es s\u00e3o permitidas (por exemplo, <\/span><span style=\"font-weight: 400;\">top right<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Comprimentos<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Valores em pixels (por exemplo, <\/span><span style=\"font-weight: 400;\">background-position: 20px 10px;<\/span><span style=\"font-weight: 400;\">) ou unidades de viewport para posicionamento responsivo.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Porcentagens<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Posiciona a imagem como uma porcentagem relativa \u00e0 largura e altura do cont\u00eainer (por exemplo, <\/span><span style=\"font-weight: 400;\">background-position: 30% 75%;<\/span><span style=\"font-weight: 400;\">)<\/span><\/p>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a814e1e elementor-widget elementor-widget-code-highlight\" data-id=\"a814e1e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('texture.png');\r\n    background-position: center bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f42eb0d elementor-widget elementor-widget-text-editor\" data-id=\"f42eb0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Combinando Posi\u00e7\u00f5es<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u00c9 poss\u00edvel combinar valores de palavra-chave, porcentagem e pixel na propriedade <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> para criar um posicionamento de imagem complexo e preciso dentro do seu design.<\/span><\/p>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf161b9 elementor-widget elementor-widget-code-highlight\" data-id=\"bf161b9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('icon.png');\r\n    background-repeat: no-repeat;\r\n    background-position: right 20px bottom 10px; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e536de elementor-widget elementor-widget-text-editor\" data-id=\"0e536de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Isto posicionaria um \u00edcone a 20 pixels da borda direita e 10 pixels da borda inferior do elemento cont\u00eainer.<\/span><\/p>\n<p><b>Importante:<\/b><span style=\"font-weight: 400;\"> Ao utilizar dois valores, o primeiro valor representa a posi\u00e7\u00e3o horizontal, e o segundo valor representa a posi\u00e7\u00e3o vertical.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Fundos Fixos vs. Rolantes <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">A Propriedade <\/span><span style=\"font-weight: 400;\">background-attachment<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">background-attachment<\/span><span style=\"font-weight: 400;\">  controla como uma imagem de fundo se comporta quando o usu\u00e1rio rola a p\u00e1gina. Aqui est\u00e3o os principais valores:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scroll<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem de fundo rola junto com o conte\u00fado do elemento (este \u00e9 o comportamento padr\u00e3o).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fixed<\/b><b>:<\/b><span style=\"font-weight: 400;\"> A imagem de fundo permanece fixa em sua posi\u00e7\u00e3o relativa \u00e0 viewport, criando a ilus\u00e3o de que ela permanece no lugar enquanto o conte\u00fado rola sobre ela.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>local<\/b><span style=\"font-weight: 400;\"> A imagem de fundo rola junto com o conte\u00fado do pr\u00f3prio elemento, mesmo se esse elemento tiver um mecanismo de rolagem.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">O Efeito Parallax<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A rolagem parallax \u00e9 uma t\u00e9cnica popular na qual as imagens de fundo se movem a uma taxa mais lenta que o conte\u00fado do primeiro plano, criando uma ilus\u00e3o de profundidade. Isto \u00e9 alcan\u00e7ado utilizando background-attachment: fixed, juntamente com JavaScript para ajustar a posi\u00e7\u00e3o da imagem de fundo com base no progresso da rolagem.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es de Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ao decidir entre fundos fixos e rolantes, considere estes fatores:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Impacto Visual:<\/b><span style=\"font-weight: 400;\"> Fundos fixos podem criar um efeito dram\u00e1tico ou imersivo, frequentemente utilizados em se\u00e7\u00f5es de destaque.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Legibilidade:<\/b><span style=\"font-weight: 400;\"> Assegure-se de que qualquer texto sobreposto a um fundo fixo tenha contraste suficiente para permanecer leg\u00edvel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Desempenho:<\/b><span style=\"font-weight: 400;\"> Fundos fixos, especialmente aqueles utilizados para efeitos parallax, podem ter um leve impacto no desempenho. Utilize-os estrategicamente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Experi\u00eancia do Usu\u00e1rio:<\/b><span style=\"font-weight: 400;\"> Evite o uso excessivo de planos de fundo fixos ou paralaxe demasiadamente complexos, pois estes podem distrair ou desorientar os usu\u00e1rios em determinados dispositivos.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">T\u00e9cnicas Avan\u00e7adas de Imagem de Fundo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">M\u00faltiplas Imagens de Fundo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O CSS permite a sobreposi\u00e7\u00e3o de m\u00faltiplas imagens de fundo em um \u00fanico elemento, criando efeitos visuais ricos com profundidade e complexidade. Eis como alcan\u00e7ar este resultado:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Valores de <\/b><b>background-image<\/b><b> separados por v\u00edrgula:<\/b><span style=\"font-weight: 400;\"> Enumere m\u00faltiplos valores <\/span><span style=\"font-weight: 400;\">url()<\/span><span style=\"font-weight: 400;\"> dentro da propriedade <\/span><span style=\"font-weight: 400;\">background-image<\/span><span style=\"font-weight: 400;\">, separados por v\u00edrgulas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ordem de empilhamento das camadas:<\/b><span style=\"font-weight: 400;\"> A primeira imagem na lista \u00e9 a camada mais inferior; as imagens subsequentes s\u00e3o empilhadas por cima.<\/span><\/li>\n<\/ol>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb24e81 elementor-widget elementor-widget-code-highlight\" data-id=\"bb24e81\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('gradient.png'), url('texture.jpg'), url('logo.svg');\r\n    background-repeat: no-repeat, repeat, no-repeat;\r\n    background-position: center, 0 0, right bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-303b04b elementor-widget elementor-widget-text-editor\" data-id=\"303b04b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Importante:<\/b><span style=\"font-weight: 400;\"> \u00c9 poss\u00edvel controlar as propriedades <\/span><span style=\"font-weight: 400;\">background-repeat, background-position<\/span><span style=\"font-weight: 400;\">, e outras, para cada imagem de fundo individualmente, fornecendo listas separadas por v\u00edrgulas para essas propriedades tamb\u00e9m.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Gradientes Lineares<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Gradientes s\u00e3o transi\u00e7\u00f5es suaves entre duas ou mais cores. A tag  <\/span><span style=\"font-weight: 400;\">linear-gradient()<\/span><span style=\"font-weight: 400;\"> \u00e9 uma fun\u00e7\u00e3o que permite criar gradientes lineares para efeitos de fundo din\u00e2micos.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintaxe B\u00e1sica<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">CSS<\/span><\/p>\n<p><span style=\"font-weight: 400;\">background-image: linear-gradient(direction, color-stop1, color-stop2, &#8230;); <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>direction<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Isto define o \u00e2ngulo do gradiente. Pode ser expresso com palavras-chave (<\/span><span style=\"font-weight: 400;\">to top<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">to bottom right<\/span><span style=\"font-weight: 400;\">) ou graus num\u00e9ricos (e.g., <\/span><span style=\"font-weight: 400;\">45deg<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-stop<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Uma cor e sua posi\u00e7\u00e3o ao longo da linha do gradiente (e.g., <\/span><span style=\"font-weight: 400;\">blue 0%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">red 50%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">green 100%<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2297ef elementor-widget elementor-widget-code-highlight\" data-id=\"e2297ef\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n   background-image: linear-gradient(to right, #f00 0%, #00f 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19bfbcd elementor-widget elementor-widget-text-editor\" data-id=\"19bfbcd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Gradientes Radiais<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Gradientes radiais criam uma transi\u00e7\u00e3o de cor que se irradia a partir de um ponto central. Eis como utilizar a fun\u00e7\u00e3o  <\/span><span style=\"font-weight: 400;\">radial-gradient()<\/span><span style=\"font-weight: 400;\"> em CSS:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintaxe B\u00e1sica<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a31c77 elementor-widget elementor-widget-code-highlight\" data-id=\"4a31c77\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f57d39d elementor-widget elementor-widget-text-editor\" data-id=\"f57d39d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Forma<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Define a forma do gradiente. Pode ser:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">ellipse<\/span><span style=\"font-weight: 400;\"> (padr\u00e3o)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">circle<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Tamanho<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Determina a extens\u00e3o do gradiente. As op\u00e7\u00f5es incluem:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">closest-side<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">farthest-side<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">closest-corner<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">farthest-corner<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Comprimentos expl\u00edcitos ou porcentagens.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Posi\u00e7\u00e3o<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Define o ponto central do gradiente. Utiliza uma sintaxe similar a  <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Color-stop<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Igual aos gradientes lineares.<\/span><\/p>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c26c518 elementor-widget elementor-widget-code-highlight\" data-id=\"c26c518\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: radial-gradient(circle at center, #ff0000 0%, #0000ff 60%, #000 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9838c5 elementor-widget elementor-widget-text-editor\" data-id=\"a9838c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Dicas<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Os gradientes radiais podem iniciar de diferentes posi\u00e7\u00f5es dentro do cont\u00eainer, n\u00e3o apenas do centro. Experimente com o valor  <\/span><span style=\"font-weight: 400;\">position<\/span><span style=\"font-weight: 400;\"> para obter efeitos interessantes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Assim como seus cong\u00eaneres lineares, os gradientes radiais podem adicionar uma sensa\u00e7\u00e3o de profundidade ou foco visual \u00e0s suas imagens de fundo.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Transpar\u00eancia com RGBA e Opacidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vamos explorar como voc\u00ea pode controlar a transpar\u00eancia e criar efeitos de fundo semi-transparentes:<\/span><\/p>\n<p><b>Cores RGBA:<\/b><span style=\"font-weight: 400;\"> RGBA estende o modelo de cor RGB adicionando um canal alfa (A), que controla a opacidade. Os valores variam de 0 (completamente transparente) a 1 (completamente opaco).<\/span><\/p>\n<p><b>Exemplo:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ae6538 elementor-widget elementor-widget-code-highlight\" data-id=\"2ae6538\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-color: rgba(255, 0, 0, 0.5); \/* Half-transparent red *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3884453 elementor-widget elementor-widget-text-editor\" data-id=\"3884453\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Propriedade de Opacidade:<\/b><span style=\"font-weight: 400;\"> Esta propriedade aplica opacidade a um elemento inteiro, incluindo sua imagem de fundo. Os valores variam de 0 a 1.<\/span><\/p>\n<p><b>Exemplo:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-528c20f elementor-widget elementor-widget-code-highlight\" data-id=\"528c20f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nimg {\r\n    opacity: 0.8; \/* Makes the image 80% opaque *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27d1faf elementor-widget elementor-widget-text-editor\" data-id=\"27d1faf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Otimizando Imagens de Fundo para Desempenho <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Compress\u00e3o de Imagem<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A compress\u00e3o de imagens reduz o tamanho do arquivo sem sacrificar excessivamente a qualidade. \u00c9 um equil\u00edbrio delicado, e aqui est\u00e3o algumas ferramentas e abordagens a considerar:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Ferramentas de Otimiza\u00e7\u00e3o de Imagens<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Servi\u00e7os online:<\/b><span style=\"font-weight: 400;\"> TinyPNG, Squoosh, Kraken.io, e muitos outros oferecem ferramentas online.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Software:<\/b><span style=\"font-weight: 400;\"> Photoshop, GIMP, ou softwares dedicados \u00e0 otimiza\u00e7\u00e3o de imagens como ImageOptim.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Otimizador de Imagem do Elementor:<\/b><span style=\"font-weight: 400;\"> Caso planeje mencionar o Elementor, introduza brevemente sua ferramenta integrada de otimiza\u00e7\u00e3o de imagens para um fluxo de trabalho simplificado.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Compress\u00e3o com Perda vs. Sem Perda<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Com perda:<\/b><span style=\"font-weight: 400;\"> Reduz o tamanho do arquivo mais significativamente descartando permanentemente alguns dados da imagem (adequado para fotos; use com crit\u00e9rio).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sem perda:<\/b><span style=\"font-weight: 400;\"> Otimiza o tamanho do arquivo sem qualquer perda de qualidade (ideal para gr\u00e1ficos e logotipos).<\/span><\/li>\n<\/ul>\n<p><b>Encontrando o Ponto Ideal:<\/b><span style=\"font-weight: 400;\"> Experimente diferentes n\u00edveis de compress\u00e3o para encontrar o melhor equil\u00edbrio entre tamanho de arquivo e qualidade visual para suas imagens de fundo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Pr\u00e9-carregamento<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O pr\u00e9-carregamento indica ao navegador que as imagens de fundo s\u00e3o importantes e devem ser buscadas no in\u00edcio do processo de carregamento da p\u00e1gina. Eis como implement\u00e1-lo utilizando a tag HTML <\/span><span style=\"font-weight: 400;\">&lt;link&gt;<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fc6a78 elementor-widget elementor-widget-code-highlight\" data-id=\"6fc6a78\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<link rel=\"preload\" as=\"image\" href=\"hero-image.jpg\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4650e89 elementor-widget elementor-widget-text-editor\" data-id=\"4650e89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><b>Otimize Imagens de Fundo para Tempos de Carregamento Mais R\u00e1pidos<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Embora as imagens de fundo possam aprimorar significativamente o apelo visual do seu design, elas tamb\u00e9m podem impactar a velocidade de carregamento da p\u00e1gina se n\u00e3o forem otimizadas. Ao utilizar um plugin <\/span><a href=\"https:\/\/elementor.com\/products\/image-optimizer\"><span style=\"font-weight: 400;\">otimizador de imagens<\/span><\/a><span style=\"font-weight: 400;\"> de otimiza\u00e7\u00e3o de imagens, \u00e9 poss\u00edvel comprimir as imagens de fundo para reduzir seu tamanho de arquivo sem sacrificar a qualidade. Esta r\u00e1pida etapa assegura que sua p\u00e1gina carregue mais rapidamente, melhorando a experi\u00eancia do usu\u00e1rio e auxiliando no SEO. Para obter os melhores resultados, sempre procure utilizar imagens otimizadas em conjunto com CSS eficiente para alcan\u00e7ar o equil\u00edbrio perfeito entre est\u00e9tica e desempenho.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07e810a elementor-widget elementor-widget-text-editor\" data-id=\"07e810a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Imagens de Fundo e Tend\u00eancias de Design Web <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Tend\u00eancias Atuais<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O design web est\u00e1 em constante evolu\u00e7\u00e3o, e o uso de imagens de fundo naturalmente reflete essas mudan\u00e7as. Aqui est\u00e3o algumas tend\u00eancias not\u00e1veis:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Imagens de Destaque Impactantes:<\/b><span style=\"font-weight: 400;\"> Imagens de fundo grandes e de alta qualidade em se\u00e7\u00f5es de destaque s\u00e3o uma constante. Elas definem o tom do site e capturam a aten\u00e7\u00e3o do visitante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texturas e Gradientes: <\/b><span style=\"font-weight: 400;\">Estes adicionam profundidade e interesse sem sobrecarregar o design geral. Os gradientes oferecem transi\u00e7\u00f5es suaves de cores, enquanto as texturas trazem uma qualidade t\u00e1til.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ilustra\u00e7\u00f5es como Fundos:<\/b><span style=\"font-weight: 400;\"> Ilustra\u00e7\u00f5es personalizadas oferecem personalidade e singularidade, especialmente quando combinadas com tipografia ousada.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sobreposi\u00e7\u00f5es com Cor e Opacidade:<\/b><span style=\"font-weight: 400;\"> Colocar uma sobreposi\u00e7\u00e3o colorida com transpar\u00eancia sobre uma imagem de fundo pode criar efeitos visuais marcantes e melhorar a legibilidade do texto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Layouts Assim\u00e9tricos:<\/b><span style=\"font-weight: 400;\"> Imagens de fundo s\u00e3o ferramentas poderosas para enfatizar a assimetria nos designs, criando uma composi\u00e7\u00e3o mais din\u00e2mica e inesperada.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Anima\u00e7\u00e3o e Intera\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> Anima\u00e7\u00f5es CSS ou efeitos de hover em imagens de fundo adicionam um toque de engajamento e ludicidade.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es de Acessibilidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lembre-se, as tend\u00eancias de design n\u00e3o devem vir \u00e0 custa da acessibilidade! Aqui est\u00e3o pontos-chave a serem considerados:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contraste:<\/b><span style=\"font-weight: 400;\"> Sempre assegure contraste de cor suficiente entre qualquer texto sobreposto \u00e0 sua imagem de fundo e a pr\u00f3pria imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Informa\u00e7\u00e3o Alternativa:<\/b><span style=\"font-weight: 400;\"> Para imagens de fundo que transmitem conte\u00fado importante, ofere\u00e7a alternativas baseadas em texto ou utilize atributos ARIA para fornecer descri\u00e7\u00f5es para leitores de tela.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fundos Complexos:<\/b><span style=\"font-weight: 400;\"> Imagens complexas podem ser distrativas para alguns usu\u00e1rios. Em caso de d\u00favida, opte por um fundo mais simples para priorizar a legibilidade.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Vamos fazer isso! Aqui est\u00e3o algumas t\u00e9cnicas adicionais para aprimorar seu uso de imagens de fundo.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Al\u00e9m do B\u00e1sico <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Modos de Mesclagem de Fundo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os modos de mesclagem de fundo CSS determinam como uma imagem de fundo interage com as cores ou conte\u00fado existentes por tr\u00e1s dela. Isso abre uma gama inteira de possibilidades criativas. Alguns dos modos de mesclagem mais comuns incluem:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>multiply<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Escurece o resultado multiplicando as cores de fundo e de primeiro plano.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>screen<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Clareia o resultado invertendo, multiplicando e invertendo novamente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>overlay<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Combina multiply e screen para um efeito de contraste.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-dodge<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Clareia o fundo com base na cor de primeiro plano.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-burn<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Escurece o fundo com base na cor de primeiro plano.<\/span><\/li>\n<\/ul>\n<p><b>Exemplo:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fe95c6 elementor-widget elementor-widget-code-highlight\" data-id=\"6fe95c6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('image.jpg');\r\n    background-blend-mode: multiply; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de314b7 elementor-widget elementor-widget-text-editor\" data-id=\"de314b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Dicas<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Experimente diferentes modos de mesclagem para alcan\u00e7ar efeitos visuais \u00fanicos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Os modos de mesclagem funcionam melhor quando a imagem de fundo possui \u00e1reas de transpar\u00eancia.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Esteja atento \u00e0 legibilidade de qualquer texto colocado sobre imagens com modos de mesclagem aplicados.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Imagens de Fundo com Anima\u00e7\u00f5es e Transi\u00e7\u00f5es CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Adicionar anima\u00e7\u00f5es ou transi\u00e7\u00f5es CSS permite criar imagens de fundo din\u00e2micas que mudam ao longo do tempo. Aqui est\u00e3o algumas ideias:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Efeitos de Hover:<\/b><span style=\"font-weight: 400;\"> Altere o <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">, ou aplique filtros ao passar o mouse sobre um elemento com uma imagem de fundo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Efeito Ken Burns:<\/b><span style=\"font-weight: 400;\"> Simule o efeito de panor\u00e2mica e zoom comumente utilizado em document\u00e1rios atrav\u00e9s da altera\u00e7\u00e3o gradual de <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gradientes Animados:<\/b><span style=\"font-weight: 400;\"> Alterne entre pontos de cor em um gradiente utilizando anima\u00e7\u00f5es CSS para criar um efeito de transi\u00e7\u00e3o fascinante.<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> Utilize anima\u00e7\u00f5es de forma judiciosa! Anima\u00e7\u00f5es excessivamente distrativas podem impactar negativamente a experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Imagens de Fundo como Sprites<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Tradicionalmente, um sprite de imagem combina m\u00faltiplas imagens menores em um \u00fanico arquivo, melhorando o desempenho ao reduzir requisi\u00e7\u00f5es HTTP. Esta mesma t\u00e9cnica pode ser aplicada a imagens de fundo! Aqui est\u00e1 como funciona:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Combine imagens:<\/b><span style=\"font-weight: 400;\"> Crie uma folha de sprites contendo todas as suas pequenas imagens de fundo (por exemplo, \u00edcones).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Utilize background-position:<\/b><span style=\"font-weight: 400;\"> Posicione precisamente cada \u00edcone dentro do elemento contentor utilizando <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ol>\n<p><b>Quando utilizar isto:<\/b><span style=\"font-weight: 400;\"> \u00c9 \u00fatil ao trabalhar com m\u00faltiplos \u00edcones pequenos que s\u00e3o frequentemente utilizados em todo o seu site.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Imagens de fundo, quando utilizadas criteriosamente, podem transformar a apar\u00eancia, a sensa\u00e7\u00e3o e a experi\u00eancia geral do usu\u00e1rio de um site. Ao compreender as propriedades CSS fundamentais, explorar t\u00e9cnicas avan\u00e7adas e priorizar a otimiza\u00e7\u00e3o, voc\u00ea pode criar visuais impressionantes que n\u00e3o comprometem o desempenho.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lembre-se destes pontos principais:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Com base no conte\u00fado de sua imagem, selecione os formatos de imagem apropriados (JPEG, PNG, GIF, SVG, WebP).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Controle a repeti\u00e7\u00e3o, o dimensionamento e o posicionamento da imagem com precis\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Experimente com fundos fixos versus rolantes para efeitos de design \u00fanicos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sobreponha imagens, utilize gradientes e controle a transpar\u00eancia para criar profundidade criativa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Otimize, pr\u00e9-carregue e potencialmente carregue imagens de forma pregui\u00e7osa para garantir tempos de carregamento extremamente r\u00e1pidos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mantenha-se atualizado sobre as tend\u00eancias atuais de design web e diretrizes de acessibilidade.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Ferramentas como o Elementor podem simplificar significativamente o gerenciamento de imagens de fundo, permitindo que voc\u00ea se concentre em sua vis\u00e3o de design enquanto as otimiza\u00e7\u00f5es de desempenho s\u00e3o tratadas nos bastidores.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Seja voc\u00ea um desenvolvedor web experiente ou esteja apenas come\u00e7ando, as imagens de fundo s\u00e3o uma ferramenta essencial em seu conjunto de ferramentas de design web. N\u00e3o tenha receio de experimentar e expandir os limites do que \u00e9 poss\u00edvel!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Propriedade CSS background-image: Como incluir uma imagem de fundo CSS<\/title>\n<meta name=\"description\" content=\"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS\" \/>\n<meta property=\"og:description\" content=\"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:19:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T11:40:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2026-01-09T11:40:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\"},\"wordCount\":2731,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\",\"name\":\"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2026-01-09T11:40:23+00:00\",\"description\":\"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS","description":"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS","og_description":"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:19:01+00:00","article_modified_time":"2026-01-09T11:40:23+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2026-01-09T11:40:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/"},"wordCount":2731,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/","url":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/","name":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2026-01-09T11:40:23+00:00","description":"As imagens de fundo possuem o poder de transformar a apar\u00eancia e a sensa\u00e7\u00e3o de qualquer website. De texturas a imagens de destaque ousadas, elas adicionam profundidade visual, estabelecem o tom e direcionam o olhar do usu\u00e1rio pela p\u00e1gina. O CSS (Cascading Style Sheets) proporciona uma abund\u00e2ncia de ferramentas para personalizar imagens de fundo, oferecendo-lhe um controle extraordin\u00e1rio sobre sua apar\u00eancia e comportamento.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/propriedade-css-background-image-como-incluir-uma-imagem-de-fundo-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Propriedade CSS background-image: Como incluir uma imagem de fundo CSS"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=123728"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123728\/revisions"}],"predecessor-version":[{"id":150114,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123728\/revisions\/150114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=123728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=123728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=123728"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=123728"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=123728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}