diff options
Diffstat (limited to 'files/tr/web/css/background/index.html')
| -rw-r--r-- | files/tr/web/css/background/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html new file mode 100644 index 0000000000..e5ef80a75a --- /dev/null +++ b/files/tr/web/css/background/index.html @@ -0,0 +1,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 <background-color> */ +background: green; + +/* Using a <bg-image> and <repeat-style> */ +background: url("test.jpg") repeat-y; + +/* Using a <box> and <background-color> */ +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="#<attachment>"><attachment></a></code></li> + <li><code><a href="#<bg-image>"><bg-image></a></code></li> + <li><code><a href="#<position>"><position></a></code></li> + <li><code><a href="#<bg-size>"><bg-size></a></code></li> + <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> + </ul> + </li> + <li> <code><a href="#<bg-size>"><bg-size></a></code> değeri sadece <code><a href="#<position>"><position></a></code> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "<code>center/80%</code>".</li> + <li> <code><a href="#<box>"><box></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="#<background-color>"><background-color></a></code> değeri sadece son katmana eklebilir.</li> +</ul> + +<h3 id="Values(Değerler)">Values(Değerler)</h3> + +<dl> + <dt id="<attachment>"><code><attachment></code></dt> + <dd>See {{cssxref("background-attachment")}}</dd> + <dt id="<box>"><code><box></code></dt> + <dd>See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd> + <dt id="<background-color>"><code><background-color></code></dt> + <dd>See {{cssxref("background-color")}}</dd> + <dt id="<bg-image>"><code><bg-image></code></dt> + <dd>See {{Cssxref("background-image")}}</dd> + <dt id="<position>"><code><position></code></dt> + <dd>See {{cssxref("background-position")}}</dd> + <dt id="<repeat-style>"><code><repeat-style></code></dt> + <dd>See {{cssxref("background-repeat")}}</dd> + <dt id="<bg-size>"><code><bg-size></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"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></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> |