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

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

1. References
2. CSS
3. background-size

Article Actions

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

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

1. CSS
2. Tutorials
3. CSS basics
4. CSS first steps
   1. CSS first steps overview
   2. What is CSS?
   3. Getting started with CSS
   4. How CSS is structured
   5. How CSS works
   6. Assessment: Styling a biography page
5. CSS building blocks
   1. CSS building blocks overview
   2. CSS selectors
   3. Type, class, and ID selectors
   4. Attribute selectors
   5. Pseudo-classes and pseudo-elements
   6. Combinators
   7. Cascade, specificity, and inheritance
   8. Cascade layers
   9. The box model
   10. Backgrounds and borders
   11. Handling different text directions
   12. Overflowing content
   13. CSS values and units
   14. Sizing items in CSS
   15. Images, media, and form elements
   16. Styling tables
   17. Debugging CSS
   18. Organizing your CSS
   19. Assessment: Fundamental CSS comprehension
   20. Assessment: Creating fancy letterheaded paper
   21. Assessment: A cool-looking box
6. Styling text
   1. Styling text overview
   2. Fundamental text and font styling
   3. Styling lists
   4. Styling links
   5. Web fonts
   6. Assessment: Typesetting a community school homepage
7. CSS layout
   1. CSS layout overview
   2. Introduction to CSS layout
   3. Normal Flow
   4. Flexbox
   5. Grids
   6. Floats
   7. Positioning
   8. Multiple-column layout
   9. Responsive design
   10. Beginner's guide to media queries
   11. Legacy layout methods
   12. Supporting older browsers
   13. Assessment: Fundamental layout comprehension
8. Reference
9. 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 custom properties for cascading variables
   10. CSS color adjustment
   11. CSS colors
   12. CSS compositing and blending
   13. CSS conditional rules
   14. CSS containment
   15. CSS counter styles
   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-driven animations
   43. CSS scroll snap
   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
10. 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
        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
11. Selectors
    1. Attribute selectors
    2. Class selectors
    3. ID selectors
    4. & nesting selector
    5. Type selectors
    6. Universal selectors
12. 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
13. 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
    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()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state()
    78. :target
    79. :target-within Experimental
    80. :user-invalid
    81. :user-valid
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
14. 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
15. 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 Experimental
16. 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. blur()
    11. brightness()
    12. calc-size() Experimental
    13. calc()
    14. circle()
    15. clamp()
    16. color-mix()
    17. color()
    18. conic-gradient()
    19. contrast()
    20. cos()
    21. counter()
    22. counters()
    23. cross-fade()
    24. cubic-bezier()
    25. device-cmyk()
    26. drop-shadow()
    27. element() Experimental
    28. ellipse()
    29. env()
    30. exp()
    31. fit-content()
    32. grayscale()
    33. hsl()
    34. hue-rotate()
    35. hwb()
    36. hypot()
    37. image-set()
    38. image()
    39. inset()
    40. invert()
    41. lab()
    42. layer()
    43. lch()
    44. light-dark()
    45. linear-gradient()
    46. linear()
    47. log()
    48. matrix()
    49. matrix3d()
    50. max()
    51. min()
    52. minmax()
    53. mod()
    54. oklab()
    55. oklch()
    56. opacity()
    57. paint()
    58. palette-mix() Experimental
    59. path()
    60. perspective()
    61. polygon()
    62. pow()
    63. radial-gradient()
    64. ray()
    65. rect()
    66. rem()
    67. repeat()
    68. repeating-conic-gradient()
    69. repeating-linear-gradient()
    70. repeating-radial-gradient()
    71. rgb()
    72. rotate()
    73. rotate3d()
    74. rotateX()
    75. rotateY()
    76. rotateZ()
    77. round()
    78. saturate()
    79. scale()
    80. scale3d()
    81. scaleX()
    82. scaleY()
    83. scaleZ()
    84. scroll() Experimental
    85. sepia()
    86. shape() Experimental
    87. sign()
    88. sin()
    89. skew()
    90. skewX()
    91. skewY()
    92. sqrt()
    93. steps()
    94. symbols()
    95. tan()
    96. translate()
    97. translate3d()
    98. translateX()
    99. translateY()
    100. translateZ()
    101. url()
    102. var()
    103. view() Experimental
    104. xywh()
17. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    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>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area>
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time>
    50. <time-percentage>
    51. <transform-function>
    52. <url>
18. Guides
19. Animations
    1. Using CSS animations
20. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
21. 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
22. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
23. 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
24. Columns
    1. Basic concepts of Multicol
    2. Styling columns
    3. Spanning and balancing
    4. Handling overflow in Multicol
    5. Content breaks in Multicol
25. Conditional rules
    1. Using feature queries
26. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
27. CSSOM view
    1. Coordinate systems
28. Flexbox
    1. Basic concepts of Flexbox
    2. Comparison with other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling flex item ratios
    6. Mastering wrapping of flex items
    7. Typical use cases of Flexbox
29. Flow layout
    1. Block and Inline layout in normal flow
    2. In flow and Out of flow
    3. Formatting contexts explained
    4. Flow layout and writing modes
    5. Flow layout and overflow
30. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
31. Grid
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. 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. Grid Layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout
32. Images
    1. Using CSS gradients
33. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
34. Logical properties
    1. Basic concepts
    2. Floating and positioning
    3. Margins, borders and padding
    4. Sizing
35. Math functions
    1. Using CSS math functions
36. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
37. Nesting style rules
    1. Using CSS nesting
    2. Nesting at-rules
    3. Nesting and specificity
38. Positioning
    1. Understanding CSS z-index
39. Scroll snap
    1. Basic concepts of scroll snap
40. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes
    4. Shapes from images
41. Text
    1. Wrapping and breaking text
42. Transforms
    1. Using transforms
43. Transitions
    1. Using transitions
44. Layout cookbook
45. 1. Media objects
    2. Columns
    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
46. Tools
47. 1. Color picker
    2. Box shadow generator
    3. Border image generator
    4. Border radius generator

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

The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Try it

Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.

Syntax

css/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Global values */ background-size: inherit; background-size: initial; background-size: revert; background-size: revert-layer; background-size: unset;

The background-size property is specified in one of the following ways:

• Using the keyword values contain or cover.
• Using a width value only, in which case the height defaults to auto.
• Using both a width and a height value, in which case the first sets the width and the second sets the height. Each value can be a <length>, a <percentage>, or auto.

To specify the size of multiple background images, separate the value for each one with a comma.

Values

contain

Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat.

cover

Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

auto

Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

<length>

Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed.

<percentage>

Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. The background positioning area is determined by the value of background-origin (by default, the padding box). However, if the background's background-attachment value is fixed, the positioning area is instead the entire viewport. Negative values are not allowed.

Intrinsic dimensions and proportions

The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:

• A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
• A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.
• CSS <gradient>s have no intrinsic dimensions or intrinsic proportions.
• Background images created with the element() function use the intrinsic dimensions and proportions of the generating element.

Note: In Gecko, background images created using the element() function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

• If both components of background-size are specified and are not auto: The background image is rendered at the specified size.

• If the background-size is contain or cover: While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.

• If the background-size is auto or auto auto:

  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.

  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.

  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.

  • If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.

  • If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.

  Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain; an explicit background-size causes preserveAspectRatio to be ignored.

• If the background-size has one auto component and one non-auto component:

  • If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
  • If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.

Note: Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.

Formal definition

Initial value	auto auto
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Percentages	relative to the background positioning area
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a repeatable list

Formal syntax

background-size = <bg-size># <bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain <length-percentage> = <length> | <percentage>

Examples

Tiling a large image

Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed background-size value of 150 pixels.

HTML

html<div class="tiledBackground"></div>

CSS

css.tiledBackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; }

Result

See Resizing background images for more examples.

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # the-background-size

Browser compatibility

BCD tables only load in the browser

See also

• Resizing background images
• Scaling of SVG backgrounds
• object-fit

Help improve MDN

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

This page was last modified on Jul 26, 2024 by MDN contributors.

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