Qualquer tecnologia que possa utilizar CSS para incluir imagens.
Esta técnica está relacionada com:
O objectivo desta técnica é fornecer um mecanismo para adicionar imagens meramente decorativas e imagens utilizadas na formatação visual para conteúdo da Web, sem necessitar de marcações adicionais no conteúdo. Isto permite às tecnologias de apoio ignorarem o conteúdo não textual. Alguns agentes de utilizador podem ignorar ou desactivar o CSS a pedido do utilizador, para que as imagens em plano de fundo incluídas com CSS simplesmente "desapareçam" e não interfiram com as definições de visualização, tais como tipos de letras ampliados ou definições de alto contraste.
As imagens em plano de fundo podem ser incluídas com as seguintes propriedades CSS:
background,
background-image,
content, em combinação com os pseudo-elementos :before and :after,
list-style-image.
Nota: Esta técnica não é apropriada para qualquer imagem que transmita informação ou forneça funcionalidade, nem para qualquer imagem cuja intenção principal seja criar uma experiência sensorial específica.
A folha de estilo para uma página Web especifica uma imagem em plano de fundo para toda a página.
Código Exemplo:
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…
A folha de estilo para uma página Web utiliza a propriedade CSS background para criar um efeito rollover decorativo quando o utilizador coloca o ponteiro do rato sobre um link.
Código Exemplo:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
A folha de estilo para uma página Web utiliza a propriedade CSS background para criar cantos arredondados em elementos.
Código Exemplo:
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…
No seguinte exemplo, é utilizada uma imagem decorativa para substituir o texto no elemento heading.
Código Exemplo:
<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}
h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
A Propriedade background na especificação CSS 2.0 (página em inglês)
A Especificação HTML 4.01 determina que o atributo background do elemento body seja preterido
Substituição de Imagem – CSS – Apresentação (página em inglês)
Verifique se existem imagens decorativas.
Verifique se são incluídas com CSS.
Se o passo 1 for verdadeiro, então o passo 2 é verdadeiro.