Css element style background

CSS backgrounds and borders

The CSS backgrounds and borders module provides properties for adding borders, rounded corners, and box shadows to elements.

You can add different types of border styles, including borders made of images of any image type, from raster images to CSS gradients. Borders can be square or rounded, and a different radius can be set for each corner. Elements can be rounded whether or not they have a visible border.

Box shadows include inset and outset shadow, single or multiple shadows, and solid or allowed to fade to transparent. An outer box-shadow casts a shadow as if the border-box of the element were opaque. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The shadow can be solid or include a spread distance with the shadow color transitioning to transparent.

The properties in this module also let you define whether cells inside a should have shared or separate borders.

Backgrounds, borders, and box shadows in action

This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to «pop». The element on the left has a border image set. The element on the right has a rounded dotted border.

The background images are defined with background-image . The images are centered with background-position . Different values of the background-clip property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the border-image and the dotted border . The rounded corners in the element on the right are created using the border-radius property. A single box-shadow declaration is used to set all the shadows, both inset and outset.

To see the code for this sample, view the source on GitHub.

Reference

Properties

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background shorthand
• background-position-x Experimental
• background-position-y Experimental
• background-position-inline Experimental
• background-position-block Experimental
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom shorthand
• border-left-color
• border-left-style
• border-left-width
• border-left shorthand
• border-right-color
• border-right-style
• border-right-width
• border-right shorthand
• border-top-color
• border-top-style
• border-top-width
• border-top shorthand
• border-color shorthand
• border-style shorthand
• border-width shorthand
• border shorthand
• border-collapse
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius shorthand
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image shorthand
• box-shadow

Data types

Guides

Explains how to implement decorative images using CSS background images.

Explains how to set one or more backgrounds on an element.

Describes how to change the size and repeating behavior of background images.

Explains how borders, along with other box model properties, impact the CSS box model.

Explains how to create CSS gradient background images.

Related concepts

• border-block-end-color property
• border-block-start-color property
• border-inline-end-color property
• border-inline-start-color property
• border-block-end-style property
• border-block-start-style property
• border-inline-end-style property
• border-inline-start-style property
• border-block-end-width property
• border-block-start-width property
• border-inline-end-width property
• border-inline-start-width property
• border-start-start-radius property
• border-start-end-radius property
• border-end-start-radius property
• border-end-end-radius property
• box-sizing property
• box-decoration-break property
• text-shadow property
• url() CSS function
• data type
• data type
• data type
• currentcolor keyword

Specifications

See also

• Interactive tools that let you visually create borders images, rounded corners, and box shadows:
  • Border-image generator
  • Border-radius generator
  • Box-shadow generator

  Found a content problem with this page?

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

  Your blueprint for a better internet.

  Источник

  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.

      Источник

      CSS Backgrounds

      The CSS background properties are used to add background effects for elements.

      In these chapters, you will learn about the following CSS background properties:

      • background-color
      • background-image
      • background-repeat
      • background-attachment
      • background-position
      • background (shorthand property)

      CSS background-color

      The background-color property specifies the background color of an element.

      Example

      The background color of a page is set like this:

      With CSS, a color is most often specified by:

      • a valid color name — like «red»
      • a HEX value — like «#ff0000»
      • an RGB value — like «rgb(255,0,0)»

      Look at CSS Color Values for a complete list of possible color values.

      Other Elements

      You can set the background color for any HTML elements:

      Example

      Here, the ,

      , and elements will have different background colors:

      div background-color: lightblue;
      >

      Opacity / Transparency

      The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 — 1.0. The lower value, the more transparent:

      Example

      Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

      Transparency using RGBA

      If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

      You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

      An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

      Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

      Example

      The CSS Background Color Property

      Источник