files/pt-pt/web/css/background-image/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

---
title: background-image
slug: Web/CSS/background-image
tags:
  - CSS_1
  - CSS_2.1
  - CSS_3
  - Referencia_CSS
translation_of: Web/CSS/background-image
---
<p>{{ CSSRef() }}</p>

<h3 id="Resumo" name="Resumo">Resumo</h3>

<p>A propriedade <code>background-image</code> configura a imagem de fundo para um elemento.</p>

<ul>
 <li>Valor inicial: none</li>
 <li>Aplica-se a: todos os elementos</li>
 <li>Herdado: não</li>
 <li>Porcentagens: N/A</li>
 <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li>
 <li>Valor computado: URI absoluta ou none</li>
</ul>

<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>

<pre class="eval">background-image:<em>uri</em> | none | inherit
</pre>

<h3 id="Valores" name="Valores">Valores</h3>

<dl>
 <dt>uri </dt>
 <dd>A localização da imagem de recurso para ser usada como imagem de fundo.</dd>
 <dt>none </dt>
 <dd>Usado para especificar que um elemento não tem imagem de fundo.</dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<p>Note that the star image is partially transparent and is layered over the cat image.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;
    &lt;p class="catsandstars"&gt;
        This paragraph is full of cats&lt;br /&gt;and stars.
    &lt;/p&gt;
    &lt;p&gt;This paragraph is not.&lt;/p&gt;
    &lt;p class="catsandstars"&gt;
        Here are more cats for you.&lt;br /&gt;Look at them!
    &lt;/p&gt;
    &lt;p&gt;And no more.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Exemplos')}}</p>

<h3 id="Notas" name="Notas">Notas</h3>

<p>Desenvolvedores devem assegurar-se de especificar um {{ Cssxref("background-color") }} para ser usado se uma imagem não estiver disponível. Imagens de fundo são renderizadas sobre a cor de fundo.</p>

<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li>
</ul>

<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Versão mais antiga</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Firefox</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3>

<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>

<p><span class="comment">Categorias</span></p>

<p><span class="comment">Interwiki Language Links</span></p>

<p>{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image" } ) }}</p>