---
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>