background
kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir shorthand 'dir: background-clip
, background-color
, background-image
, background-origin
, background-position
, background-repeat
, background-size
, ve background-attachment
.
Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller ilk değerlerini almaya devam eder.
Syntax
/* 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");
background
özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.
Her katmanın sentaksı aşağıdaki gibidir:
- Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir:
-
<bg-size>
değeri sadece<position>
değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "center/80%
". -
<box>
değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hembackground-origin
hembackground-clip
ayarlar. Eğer iki kere eklendiyse, ilk eklenenbackground-origin
özelliğini ayarlar, ikinci eklenen isebackground-clip
ayarlar. -
<background-color>
değeri sadece son katmana eklebilir.
Values(Değerler)
<attachment>
- See
background-attachment
<box>
- See
background-clip
andbackground-origin
<background-color>
- See
background-color
<bg-image>
- See
background-image
<position>
- See
background-position
<repeat-style>
- See
background-repeat
<bg-size>
- See
background-size
.
Formal syntax
[ <bg-layer> , ]* <final-bg-layer>where
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>where
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-boxwhere
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where
| rtl
= ltr
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>where
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
Örnekler
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: pink;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
Sonuç
Accessibility concerns
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.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background' in that specification. |
Candidate Recommendation | The shorthand property has been extended to support multiple backgrounds and the new background-size , background-origin and background-clip properties. |
CSS Level 2 (Revision 1) The definition of 'background' in that specification. |
Recommendation | No significant changes |
CSS Level 1 The definition of 'background' in that specification. |
Recommendation | Initial definition |
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Browser compatibility
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.