files/tr/web/css/background/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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

---
title: background
slug: Web/CSS/background
translation_of: Web/CSS/background
---
<div>{{CSSRef("CSS Background")}}</div>

<p><span class="seoSummary"><strong><code>background </code></strong>kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.</span></p>

<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>


<p>Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir  <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.</p>

<p>Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller <a href="/en-US/docs/Web/CSS/initial_value">ilk değer</a>lerini almaya devam eder.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css no-line-numbers">/* Using a &lt;background-color&gt; */
background: green;

/* Using a &lt;bg-image&gt; and &lt;repeat-style&gt; */
background: url("test.jpg") repeat-y;

/* Using a &lt;box&gt; and &lt;background-color&gt; */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
</pre>

<p><code>background</code> özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.</p>

<p>Her katmanın sentaksı aşağıdaki gibidir:</p>

<ul>
 <li>Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir:
  <ul>
   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li> <code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> değeri sadece <code><a href="#&lt;position>">&lt;position&gt;</a></code> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "<code>center/80%</code>".</li>
 <li> <code><a href="#&lt;box>">&lt;box&gt;</a></code> değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hem {{cssxref("background-origin")}} hem {{cssxref("background-clip")}} ayarlar. Eğer iki kere eklendiyse, ilk eklenen {{cssxref("background-origin")}} özelliğini ayarlar, ikinci eklenen ise {{cssxref("background-clip")}} ayarlar.</li>
 <li> <code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> değeri sadece son katmana eklebilir.</li>
</ul>

<h3 id="Values(Değerler)">Values(Değerler)</h3>

<dl>
 <dt id="&lt;attachment>"><code>&lt;attachment&gt;</code></dt>
 <dd>See {{cssxref("background-attachment")}}</dd>
 <dt id="&lt;box>"><code>&lt;box&gt;</code></dt>
 <dd>See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd>
 <dt id="&lt;background-color>"><code>&lt;background-color&gt;</code></dt>
 <dd>See {{cssxref("background-color")}}</dd>
 <dt id="&lt;bg-image>"><code>&lt;bg-image&gt;</code></dt>
 <dd>See {{Cssxref("background-image")}}</dd>
 <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
 <dd>See {{cssxref("background-position")}}</dd>
 <dt id="&lt;repeat-style>"><code>&lt;repeat-style&gt;</code></dt>
 <dd>See {{cssxref("background-repeat")}}</dd>
 <dt id="&lt;bg-size>"><code>&lt;bg-size&gt;</code></dt>
 <dd>See {{cssxref("background-size")}}.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Örnekler">Örnekler</h2>

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

<pre class="brush: html">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

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

<pre class="brush:css' highlight:[2,6];">.warning {
  background: pink;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
</pre>

<h3 id="Sonuç">Sonuç</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<p>Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p>

<ul>
 <li><a href="/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="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>No significant changes</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("css.properties.background")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("box-decoration-break")}}</li>
 <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Using gradients</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li>
</ul>