Главная » Языки программирования

Background size css property

На чтение 10 мин
Содержание
  1. background
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Accessibility concerns
  7. Formal definition
  8. Formal syntax
  9. Examples
  10. Setting backgrounds with color keywords and images
  11. HTML
  12. CSS
  13. Result
  14. Specifications
  15. Browser compatibility
  16. See also
  17. Found a content problem with this page?
  18. MDN
  19. Support
  20. Our communities
  21. Developers
  22. background-size
  23. Try it
  24. Syntax
  25. Values
  26. Intrinsic dimensions and proportions
  27. Formal definition
  28. Formal syntax
  29. Examples
  30. Tiling a large image
  31. HTML
  32. CSS
  33. Result
  34. Specifications
  35. Browser compatibility
  36. See also
  37. Found a content problem with this page?
  38. MDN
  39. Support
  40. Our communities
  41. Developers

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset;

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

  • Each layer may include zero or one occurrences of any of the following values:
    • The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
    • The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
    • The value may only be included in the last layer specified.

    Values

    See background-clip and background-origin . Default: border-box and padding-box respectively.

    See background-color . Default: transparent .

    The following three lines of CSS are equivalent:

    background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

    Accessibility concerns

    Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

    Formal definition

    • background-image : none
    • background-position : 0% 0%
    • background-size : auto auto
    • background-repeat : repeat
    • background-origin : padding-box
    • background-clip : border-box
    • background-attachment : scroll
    • background-color : transparent
    • background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
    • background-size : relative to the background positioning area
    • background-image : as specified, but with url() values made absolute
    • background-position : as each of the properties of the shorthand:
      • background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
      • background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
      • background-color : a color
      • background-image : discrete
      • background-clip : a repeatable list of
      • background-position : a repeatable list of
      • background-size : a repeatable list of
      • background-repeat : discrete
      • background-attachment : discrete

      Formal syntax

      background =
      [ # , ]?

      =
      ||
      [ / ]? ||
      ||
      ||
      ||

      =
      ||
      ||
      [ / ]? ||
      ||
      ||
      ||

      =
      |
      none

      =
      [ left | center | right | top | bottom | ] |
      [ left | center | right | ] [ top | center | bottom | ] |
      [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]

      =
      [ | auto ] |
      cover |
      contain

      =
      repeat-x |
      repeat-y |
      [ repeat | space | round | no-repeat ]

      =
      scroll |
      fixed |
      local

      =
      border-box |
      padding-box |
      content-box

      =
      |

      =
      |

      =
      url( * ) |
      src( * )

      Examples

      Setting backgrounds with color keywords and images

      HTML

      p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p>

      CSS

      .warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; >

      Result

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on Jul 18, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      background-size

      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

      /* 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 , a , or auto .

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

      Values

      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 .

      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.

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

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

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

Оцените статью
© 2023 Программирование