Background-color - CSS: Cascading Style Sheets - MDN Web Docs

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. CSS
3. background-color

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 한국어
  • Português (do Brasil)
  • Русский
  • 中文 (简体)
  • 正體中文 (繁體)

• Try it
• Syntax
• Accessibility
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

1. CSS
2. Beginner's tutorials
3. Your first website: Styling the content
4. CSS styling basics
   1. What is CSS?
   2. Getting started with CSS
   3. Challenge: Styling a biography page
   4. Basic CSS selectors
   5. Attribute selectors
   6. Pseudo-classes and pseudo-elements
   7. Combinators
   8. The box model
   9. Handling conflicts
   10. CSS values and units
   11. Sizing items in CSS
   12. Backgrounds and borders
   13. Overflowing content
   14. Images, media, and form elements
   15. Styling tables
   16. Debugging CSS
   17. Challenge: Fundamental CSS comprehension
   18. Challenge: Creating fancy letterheaded paper
   19. Challenge: A cool-looking box
5. CSS text styling
   1. Fundamental text and font styling
   2. Styling lists
   3. Styling links
   4. Web fonts
   5. Challenge: Typesetting a community school homepage
6. CSS layout
   1. Introduction to CSS layout
   2. Floats
   3. Positioning
   4. Flexbox
   5. CSS grid layout
   6. Responsive design
   7. Media query fundamentals
   8. Challenge: Fundamental layout comprehension
7. CSS reference
8. Modules
   1. CSS anchor positioning
   2. CSS animations
   3. CSS backgrounds and borders
   4. CSS basic user interface
   5. CSS box alignment
   6. CSS box model
   7. CSS box sizing
   8. CSS cascade and inheritance
   9. CSS color adjustment
   10. CSS colors
   11. CSS compositing and blending
   12. CSS conditional rules
   13. CSS containment
   14. CSS counter styles
   15. CSS custom properties for cascading variables
   16. CSS display
   17. CSS filter effects
   18. CSS flexible box layout
   19. CSS font loading
   20. CSS fonts
   21. CSS fragmentation
   22. CSS generated content
   23. CSS grid layout
   24. CSS images
   25. CSS inline layout
   26. CSS lists and counters
   27. CSS logical properties and values
   28. CSS masking
   29. CSS media queries
   30. CSS motion path
   31. CSS multi-column layout
   32. CSS namespaces
   33. CSS nesting
   34. CSS overflow
   35. CSS overscroll behavior
   36. CSS paged media
   37. CSS positioned layout
   38. CSS properties and values API
   39. CSS pseudo-elements
   40. CSS ruby layout
   41. CSS scoping
   42. CSS scroll snap
   43. CSS scroll-driven animations
   44. CSS scrollbars styling
   45. CSS selectors
   46. CSS shadow parts
   47. CSS shapes
   48. CSS syntax
   49. CSS table
   50. CSS text
   51. CSS text decoration
   52. CSS transforms
   53. CSS transitions
   54. CSS view transitions
   55. CSS writing modes
   56. CSSOM view
9. Properties
   1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
   2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
   3. accent-color
   4. align-*
      1. align-content
      2. align-items
      3. align-self
   5. all
   6. anchor-name Experimental
   7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
   8. appearance
   9. aspect-ratio
   10. backdrop-filter
   11. backface-visibility
   12. background-*
       1. background
       2. background-attachment
       3. background-blend-mode
       4. background-clip
       5. background-color
       6. background-image
       7. background-origin
       8. background-position
       9. background-position-x
       10. background-position-y
       11. background-repeat
       12. background-size
   13. block-size
   14. border-*
       1. border
       2. border-block
       3. border-block-color
       4. border-block-end
       5. border-block-end-color
       6. border-block-end-style
       7. border-block-end-width
       8. border-block-start
       9. border-block-start-color
       10. border-block-start-style
       11. border-block-start-width
       12. border-block-style
       13. border-block-width
       14. border-bottom
       15. border-bottom-color
       16. border-bottom-left-radius
       17. border-bottom-right-radius
       18. border-bottom-style
       19. border-bottom-width
       20. border-collapse
       21. border-color
       22. border-end-end-radius
       23. border-end-start-radius
       24. border-image
       25. border-image-outset
       26. border-image-repeat
       27. border-image-slice
       28. border-image-source
       29. border-image-width
       30. border-inline
       31. border-inline-color
       32. border-inline-end
       33. border-inline-end-color
       34. border-inline-end-style
       35. border-inline-end-width
       36. border-inline-start
       37. border-inline-start-color
       38. border-inline-start-style
       39. border-inline-start-width
       40. border-inline-style
       41. border-inline-width
       42. border-left
       43. border-left-color
       44. border-left-style
       45. border-left-width
       46. border-radius
       47. border-right
       48. border-right-color
       49. border-right-style
       50. border-right-width
       51. border-spacing
       52. border-start-end-radius
       53. border-start-start-radius
       54. border-style
       55. border-top
       56. border-top-color
       57. border-top-left-radius
       58. border-top-right-radius
       59. border-top-style
       60. border-top-width
       61. border-width
   15. bottom
   16. box-*
       1. box-align Non-standard Deprecated
       2. box-decoration-break
       3. box-direction Non-standard Deprecated
       4. box-flex Non-standard Deprecated
       5. box-flex-group Non-standard Deprecated
       6. box-lines Non-standard Deprecated
       7. box-ordinal-group Non-standard Deprecated
       8. box-orient Non-standard Deprecated
       9. box-pack Non-standard Deprecated
       10. box-shadow
       11. box-sizing
   17. break-*
       1. break-after
       2. break-before
       3. break-inside
   18. caption-side
   19. caret-color
   20. clear
   21. clip-*
       1. clip Deprecated
       2. clip-path
       3. clip-rule
   22. color-*
       1. color
       2. color-interpolation
       3. color-interpolation-filters
       4. color-scheme
   23. column-*
       1. column-count
       2. column-fill
       3. column-gap
       4. column-rule
       5. column-rule-color
       6. column-rule-style
       7. column-rule-width
       8. column-span
       9. column-width
   24. columns
   25. contain-*
       1. contain
       2. contain-intrinsic-block-size
       3. contain-intrinsic-height
       4. contain-intrinsic-inline-size
       5. contain-intrinsic-size
       6. contain-intrinsic-width
   26. container-*
       1. container
       2. container-name
       3. container-type
   27. content
   28. content-visibility
   29. counter-*
       1. counter-increment
       2. counter-reset
       3. counter-set
   30. cursor
   31. cx
   32. cy
   33. d
   34. direction
   35. display
   36. dominant-baseline
   37. empty-cells
   38. field-sizing Experimental
   39. fill-*
       1. fill
       2. fill-opacity
       3. fill-rule
   40. filter
   41. flex-*
       1. flex
       2. flex-basis
       3. flex-direction
       4. flex-flow
       5. flex-grow
       6. flex-shrink
       7. flex-wrap
   42. float
   43. flood-color
   44. flood-opacity
   45. font-*
       1. font
       2. font-family
       3. font-feature-settings
       4. font-kerning
       5. font-language-override
       6. font-optical-sizing
       7. font-palette
       8. font-size
       9. font-size-adjust
       10. font-smooth Non-standard
       11. font-stretch
       12. font-style
       13. font-synthesis
       14. font-synthesis-position Experimental
       15. font-synthesis-small-caps
       16. font-synthesis-style
       17. font-synthesis-weight
       18. font-variant
       19. font-variant-alternates
       20. font-variant-caps
       21. font-variant-east-asian
       22. font-variant-emoji
       23. font-variant-ligatures
       24. font-variant-numeric
       25. font-variant-position
       26. font-variation-settings
       27. font-weight
   46. forced-color-adjust
   47. gap
   48. grid-*
       1. grid
       2. grid-area
       3. grid-auto-columns
       4. grid-auto-flow
       5. grid-auto-rows
       6. grid-column
       7. grid-column-end
       8. grid-column-start
       9. grid-row
       10. grid-row-end
       11. grid-row-start
       12. grid-template
       13. grid-template-areas
       14. grid-template-columns
       15. grid-template-rows
   49. hanging-punctuation
   50. height
   51. hyphenate-character
   52. hyphenate-limit-chars
   53. hyphens
   54. image-*
       1. image-orientation
       2. image-rendering
       3. image-resolution Experimental
   55. initial-letter
   56. inline-size
   57. inset-*
       1. inset
       2. inset-block
       3. inset-block-end
       4. inset-block-start
       5. inset-inline
       6. inset-inline-end
       7. inset-inline-start
   58. interpolate-size Experimental
   59. isolation
   60. justify-*
       1. justify-content
       2. justify-items
       3. justify-self
   61. left
   62. letter-spacing
   63. lighting-color
   64. line-*
       1. line-break
       2. line-height
       3. line-height-step Experimental
   65. list-*
       1. list-style
       2. list-style-image
       3. list-style-position
       4. list-style-type
   66. margin-*
       1. margin
       2. margin-block
       3. margin-block-end
       4. margin-block-start
       5. margin-bottom
       6. margin-inline
       7. margin-inline-end
       8. margin-inline-start
       9. margin-left
       10. margin-right
       11. margin-top
       12. margin-trim Experimental
   67. marker-*
       1. marker
       2. marker-end
       3. marker-mid
       4. marker-start
   68. mask-*
       1. mask
       2. mask-border
       3. mask-border-mode
       4. mask-border-outset
       5. mask-border-repeat
       6. mask-border-slice
       7. mask-border-source
       8. mask-border-width
       9. mask-clip
       10. mask-composite
       11. mask-image
       12. mask-mode
       13. mask-origin
       14. mask-position
       15. mask-repeat
       16. mask-size
       17. mask-type
   69. math-*
       1. math-depth
       2. math-shift Experimental
       3. math-style
   70. max-*
       1. max-block-size
       2. max-height
       3. max-inline-size
       4. max-width
   71. min-*
       1. min-block-size
       2. min-height
       3. min-inline-size
       4. min-width
   72. mix-blend-mode
   73. object-fit
   74. object-position
   75. offset-*
       1. offset
       2. offset-anchor
       3. offset-distance
       4. offset-path
       5. offset-position
       6. offset-rotate
   76. opacity
   77. order
   78. orphans
   79. outline-*
       1. outline
       2. outline-color
       3. outline-offset
       4. outline-style
       5. outline-width
   80. overflow-*
       1. overflow
       2. overflow-anchor
       3. overflow-block
       4. overflow-clip-margin
       5. overflow-inline
       6. overflow-wrap
       7. overflow-x
       8. overflow-y
   81. overlay Experimental
   82. overscroll-*
       1. overscroll-behavior
       2. overscroll-behavior-block
       3. overscroll-behavior-inline
       4. overscroll-behavior-x
       5. overscroll-behavior-y
   83. padding-*
       1. padding
       2. padding-block
       3. padding-block-end
       4. padding-block-start
       5. padding-bottom
       6. padding-inline
       7. padding-inline-end
       8. padding-inline-start
       9. padding-left
       10. padding-right
       11. padding-top
   84. page-*
       1. page
       2. page-break-after
       3. page-break-before
       4. page-break-inside
   85. paint-order
   86. perspective
   87. perspective-origin
   88. place-*
       1. place-content
       2. place-items
       3. place-self
   89. pointer-events
   90. position-*
       1. position
       2. position-anchor Experimental
       3. position-area Experimental
       4. position-try Experimental
       5. position-try-fallbacks Experimental
       6. position-try-order Experimental
       7. position-visibility Experimental
   91. print-color-adjust
   92. quotes
   93. r
   94. resize
   95. right
   96. rotate
   97. row-gap
   98. ruby-align
   99. ruby-position
   100. rx
   101. ry
   102. scale
   103. scroll-*
        1. scroll-behavior
        2. scroll-margin
        3. scroll-margin-block
        4. scroll-margin-block-end
        5. scroll-margin-block-start
        6. scroll-margin-bottom
        7. scroll-margin-inline
        8. scroll-margin-inline-end
        9. scroll-margin-inline-start
        10. scroll-margin-left
        11. scroll-margin-right
        12. scroll-margin-top
        13. scroll-padding
        14. scroll-padding-block
        15. scroll-padding-block-end
        16. scroll-padding-block-start
        17. scroll-padding-bottom
        18. scroll-padding-inline
        19. scroll-padding-inline-end
        20. scroll-padding-inline-start
        21. scroll-padding-left
        22. scroll-padding-right
        23. scroll-padding-top
        24. scroll-snap-align
        25. scroll-snap-stop
        26. scroll-snap-type
        27. scroll-timeline Experimental
        28. scroll-timeline-axis Experimental
        29. scroll-timeline-name Experimental
   104. scrollbar-*
        1. scrollbar-color
        2. scrollbar-gutter
        3. scrollbar-width
   105. shape-*
        1. shape-image-threshold
        2. shape-margin
        3. shape-outside
        4. shape-rendering
   106. stop-color
   107. stop-opacity
   108. stroke-*
        1. stroke
        2. stroke-dasharray
        3. stroke-dashoffset
        4. stroke-linecap
        5. stroke-linejoin
        6. stroke-miterlimit
        7. stroke-opacity
        8. stroke-width
   109. tab-size
   110. table-layout
   111. text-*
        1. text-align
        2. text-align-last
        3. text-anchor
        4. text-combine-upright
        5. text-decoration
        6. text-decoration-color
        7. text-decoration-line
        8. text-decoration-skip Experimental
        9. text-decoration-skip-ink
        10. text-decoration-style
        11. text-decoration-thickness
        12. text-emphasis
        13. text-emphasis-color
        14. text-emphasis-position
        15. text-emphasis-style
        16. text-indent
        17. text-justify
        18. text-orientation
        19. text-overflow
        20. text-rendering
        21. text-shadow
        22. text-size-adjust Experimental
        23. text-spacing-trim Experimental
        24. text-transform
        25. text-underline-offset
        26. text-underline-position
        27. text-wrap
        28. text-wrap-mode
        29. text-wrap-style
   112. timeline-scope Experimental
   113. top
   114. touch-action
   115. transform-*
        1. transform
        2. transform-box
        3. transform-origin
        4. transform-style
   116. transition-*
        1. transition
        2. transition-behavior
        3. transition-delay
        4. transition-duration
        5. transition-property
        6. transition-timing-function
   117. translate
   118. unicode-bidi
   119. user-modify Non-standard Deprecated
   120. user-select
   121. vector-effect
   122. vertical-align
   123. view-*
        1. view-timeline Experimental
        2. view-timeline-axis Experimental
        3. view-timeline-inset Experimental
        4. view-timeline-name Experimental
        5. view-transition-name
   124. visibility
   125. white-space
   126. white-space-collapse
   127. widows
   128. width
   129. will-change
   130. word-break
   131. word-spacing
   132. writing-mode
   133. x
   134. y
   135. z-index
   136. zoom
10. Selectors
    1. & nesting selector
    2. Attribute selectors
    3. Class selectors
    4. ID selectors
    5. Type selectors
    6. Universal selectors
11. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
12. Pseudo-classes
    1. :-moz-broken Non-standard Deprecated
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Experimental Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Experimental Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current Experimental
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has-slotted Experimental
    38. :has()
    39. :host
    40. :host-context()
    41. :host()
    42. :hover
    43. :in-range
    44. :indeterminate
    45. :invalid
    46. :is()
    47. :lang()
    48. :last-child
    49. :last-of-type
    50. :left
    51. :link
    52. :local-link Experimental
    53. :modal
    54. :muted
    55. :not()
    56. :nth-child()
    57. :nth-last-child()
    58. :nth-last-of-type()
    59. :nth-of-type()
    60. :only-child
    61. :only-of-type
    62. :optional
    63. :out-of-range
    64. :past
    65. :paused
    66. :picture-in-picture
    67. :placeholder-shown
    68. :playing
    69. :popover-open
    70. :read-only
    71. :read-write
    72. :required
    73. :right
    74. :root
    75. :scope
    76. :seeking
    77. :stalled
    78. :state()
    79. :target
    80. :target-within Experimental
    81. :user-invalid
    82. :user-valid
    83. :valid
    84. :visited
    85. :volume-locked
    86. :where()
13. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental Non-standard
    3. ::-moz-list-bullet Experimental Non-standard
    4. ::-moz-list-number Experimental Non-standard
    5. ::-moz-meter-bar Non-standard
    6. ::-moz-progress-bar Experimental Non-standard
    7. ::-moz-range-progress Non-standard
    8. ::-moz-range-thumb Non-standard
    9. ::-moz-range-track Non-standard
    10. ::-webkit-inner-spin-button Non-standard
    11. ::-webkit-meter-bar Non-standard Deprecated
    12. ::-webkit-meter-even-less-good-value Non-standard
    13. ::-webkit-meter-inner-element Non-standard
    14. ::-webkit-meter-optimum-value Non-standard
    15. ::-webkit-meter-suboptimum-value Non-standard
    16. ::-webkit-progress-bar Non-standard
    17. ::-webkit-progress-inner-element Non-standard
    18. ::-webkit-progress-value Non-standard
    19. ::-webkit-scrollbar Non-standard
    20. ::-webkit-search-cancel-button Non-standard
    21. ::-webkit-search-results-button Non-standard
    22. ::-webkit-slider-runnable-track Experimental Non-standard
    23. ::-webkit-slider-thumb Experimental Non-standard
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
14. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition
15. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. anchor-size() Experimental
    5. anchor() Experimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. calc-size() Experimental
    11. calc()
    12. clamp()
    13. cos()
    14. counter()
    15. counters()
    16. cross-fade()
    17. element() Experimental
    18. env()
    19. exp()
    20. fit-content()
    21. hypot()
    22. log()
    23. max()
    24. min()
    25. minmax()
    26. mod()
    27. pow()
    28. ray()
    29. rem()
    30. repeat()
    31. round()
    32. sign()
    33. sin()
    34. sqrt()
    35. symbols()
    36. tan()
    37. url()
    38. var()
16. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency-percentage>
    25. <frequency>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue-interpolation-method>
    30. <hue>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length-percentage>
    35. <length>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area> Experimental
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time-percentage>
    50. <time>
    51. <transform-function>
    52. <url>
17. Guides
18. Animations
    1. Using CSS animations
19. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
20. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
21. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
22. Colors
    1. Applying_color_to_HTML_elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility_Understanding_colors_and_luminance"
    6. Accessibility: Color contrast
23. Columns
    1. Basic concepts of multi-column layout
    2. Styling columns
    3. Spanning and balancing columns
    4. Handling overflow in multi-column layout
    5. Handling content breaks in multi-column layout
24. Conditional rules
    1. Using feature queries
25. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
26. CSSOM view
    1. Coordinate systems
27. Flexbox
    1. Basic concepts of flexbox
    2. Relationship of flexbox to other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling ratios of flex items along the main axis
    6. Mastering wrapping of flex items
    7. Typical use cases of flexbox
28. Flow layout
    1. Block and inline layout in normal flow
    2. In flow and out of flow
    3. Introduction to formatting contexts
    4. Flow layout and writing modes
    5. Flow layout and overflow
29. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
30. Grid
    1. Basic concepts of grid layout
    2. Relationship of grid layout to other layout methods
    3. Grid layout using line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values, and writing modes
    9. Grid layout and accessibility
    10. CSS grid layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout Experimental
31. Images
    1. Using CSS gradients
32. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
33. Logical properties
    1. Basic concepts of logical properties and values
    2. Logical properties for floating and positioning
    3. Logical properties for margins, borders, and padding
    4. Logical properties for sizing
34. Math functions
    1. Using CSS math functions
35. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
36. Nesting style rules
    1. Using CSS nesting
    2. CSS nesting at-rules
    3. CSS nesting and specificity
37. Positioning
    1. Understanding z-index
38. Scroll snap
    1. Basic concepts of scroll snap
39. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes with shape-outside
    4. Shapes from images
40. Text
    1. Wrapping and breaking text
41. Transforms
    1. Using CSS transforms
42. Transitions
    1. Using CSS transitions
43. CSS Layout cookbook
44. 1. Recipe: Media objects
    2. Column layouts
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
45. Tools
46. 1. Color picker tool
    2. Box-shadow generator
    3. Border-image generator
    4. Border-radius generator

• Try it
• Syntax
• Accessibility
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

The background-color CSS property sets the background color of an element.

Try it

Syntax

css/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 50%); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset;

The background-color property is specified as a single <color> value.

Values

<color>

The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

Accessibility

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Formal definition

Initial value	transparent
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Computed value	computed color
Animation type	a color

Formal syntax

background-color = <color>

Examples

Colorize boxes

This example demonstrates the applying background-color to HTML <div> elements using different CSS <color> values.

HTML

html<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div> <div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div> <div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css.example-one { background-color: transparent; } .example-two { background-color: rgb(153 102 153); color: rgb(255 255 204); } .example-three { background-color: #777799; color: #ffffff; }

Result

Colorize tables

This example demonstrates the use of background-color on HTML <table> elements, including <tr> rows and <td> cells.

HTML

html<table> <tr id="r1"> <td id="c11">11</td> <td id="c12">12</td> <td id="c13">13</td> </tr> <tr id="r2"> <td id="c21">21</td> <td id="c22">22</td> <td id="c23">23</td> </tr> <tr id="r3"> <td id="c31">31</td> <td id="c32">32</td> <td id="c33">33</td> </tr> </table>

CSS

csstable { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px; } td { border: solid 1px black; } #r1 { background-color: lightblue; } #c12 { background-color: cyan; } #r2 { background-color: grey; } #r3 { background-color: olive; }

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # background-color

Browser compatibility

BCD tables only load in the browser

See also

• Multiple backgrounds
• The <color> data type
• Other color-related properties: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Oct 22, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content