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
132
133
134
135
|
---
title: background-image
slug: Web/CSS/background-image
tags:
- CSS
- 'CSS:Referencias'
- Todas_las_Categorías
translation_of: Web/CSS/background-image
---
<p>{{ PreviousNext("CSS:background-color", "CSS:background-position") }}</p>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> establece una o más imágenes de fondo para un elemento.</p>
<ul>
<li>{{ Cssxref("initial", "Valor inicial") }}: ninguno</li>
<li>Se aplica a: todos los elementos</li>
<li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
<li>Porcentajes: N/A</li>
<li>Medio: {{ Cssxref("visual") }}</li>
<li>{{ Cssxref("computed value", "Valor calculada") }}: URI absoluta o ninguna</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="eval">background-image: <em>url</em> | none | inherit
</pre>
<h2 id="Valores" name="Valores">Valores</h2>
<dl>
<dt>url </dt>
<dd>Localización de la imagen que se utilizará de fondo.</dd>
<dt>none </dt>
<dd>Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</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"><div>
<p class="catsandstars">
This paragraph is full of cats<br />and stars.
</p>
<p>This paragraph is not.</p>
<p class="catsandstars">
Here are more cats for you.<br />Look at them!
</p>
<p>And no more.</p>
</div></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('Ejemplos')}}</p>
<h2 id="Notas" name="Notas">Notas</h2>
<p>Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.</p>
<h2 id="Especificaciones" name="Especificaciones">Sobre Accesibilidad</h2>
<p>Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta <code>img</code>.</p>
<p>Para más información (en inglés):</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
<li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
<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>
<h2 id="Compatibilidad_de_navegador" name="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Navegador</th>
<th>Versión mínima</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>
<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
|
