Sets the background color of an element.

rgb() | rgba() | hsl()> | hsla() | <hex-color> | <named-color> | currentcolor

Unlike the other background longhand properties, this one takes only a single value.

The uniform color of the background is rendered behind any specified background-images and may be visible through any transparency in the images.

• Use any of the color types
• Always declare when declaring background images
• Declare only once in a shorthand declaration.
• Nothing really new here

  background-color: white;
  background-color: #fff;
  background-color: #FFFFFF;
  background-color: #FFFFFFFF;
  background-color: rgb(255,255,255);
  background-color: rgb(100%,100%,100%);
  background-color: rgba(255,255,255,1);
  background-color: rgba(100%,100%,100%, 1);
  background-color: hsl(0, 100%, 100%);
  background-color: hsla(0, 100%, 100%, 1);
  background-color: transparent;
  background-color: currentColor;

Confused? See Colors & Transparency

background-image: none | <uri> | inherit 

background-image: url(path/aSingleImage.jpg);

Often part of background shorthand with:

Don't use background shorthand for risk of resetting any of 7 other (8 total) properties to default values

Sets one or more background images on an element.

none | inherit | <url> | <image()> | <image-set()> | <element()> 
<cross-fade()> | <gradient> | <paint()>

Either none, inherit, or one or more comma-separated <image> values.

background-image: url( "path/to/images/photo.jpg" );

Sets one or more background images on an element.

none | inherit | [<image>]# 

<image> = <url> | <image()> | <image-set()> | <element()> 
          <cross-fade()> | <gradient> | <paint()>

background-image: url(green.gif), url(blue.gif);

• Comma separated
• layered front to back
• Include background-color

paint() is new in houdini

• Make sure there's enough contrast with text
  • add drop shadow
• Include a background color to ensure contrast if image fails.
• Doesn't print by default
• Not accessible

none | <url>  | <gradient> | 
<image()> | <element()> | <image-set()> | <cross-fade()> | <paint()>

none
url(firstImage.jpg), url(secondImage.jpg)
url(data:image/gif;base64,fOulrS123hEAAa517sdfQfda...)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");
linear-gradient(to bottom, green, blue)
radial-gradient(circle, green, blue)
paint(workletName)

background-image: url(myGif.gif), url(otherGif.gif);

background-image: none;

background-image: linear-gradient(top, red, blue);

background-image: url(data:image/gif;base64,fOulrShEAAQ...);

background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");

background-image: element('#myID');

background-image: image('ico_sprite.jpg#xywh=32,64,16,16');

background-image: image("try1.svg", 'try2.png' , "try3.gif");

sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

repeat | repeat-x | repeat-y | no-repeat | space | round;

Can be comma-seperated for each background image or same value for all

repeat

Tiled as often as needed to cover background

no-repeat

Placed once, not tiled or repeated

repeat-x

Tiled along X axis only (Equivalent to repeat no-repeat)

repeat-y

Tiled along Y axis only (Equivalent to no-repeat repeat)

space

Repeated as often as will fit without being clipped, spaced out evenly

round

Repeated as often as will fit without being clipped then scaled so no space in between

Sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

background-attachment: fixed | local | scroll

Can be comma-seperated for each background image or same value for all

fixed

Background fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. Not compatible with background-clip: text.)

local

Background fixed relative to the element's contents as if attached to whatever word it was behind. If the element has a scrolling mechanism, the background scrolls with the element's contents.

scroll

Background is fixed relative to the element itself and does not scroll with its contents as if attached to the border.

isolated use case

You may write me down in history With your bitter, twisted lies, You may trod me in the very dirt But still, like dust, I'll rise. Does my sassiness upset you? Why are you beset with gloom? ’Cause I walk like I've got oil wells Pumping in my living room. Just like moons and like suns, With the certainty of tides, Just like hopes springing high, Still I'll rise. Did you want to see me broken? Bowed head and lowered eyes? Shoulders falling down like teardrops, Weakened by my soulful cries? Does my haughtiness offend you? Don't you take it awful hard ’Cause I laugh like I've got gold mines Diggin’ in my own backyard. You may shoot me with your words, You may cut me with your eyes, You may kill me with your hatefulness, But still, like air, I’ll rise. Does my sexiness upset you? Does it come as a surprise That I dance like I've got diamonds At the meeting of my thighs? Out of the huts of history’s shame I rise Up from a past that’s rooted in pain I rise I'm a black ocean, leaping and wide, Welling and swelling I bear in the tide. Leaving behind nights of terror and fear I rise Into a daybreak that’s wondrously clear I rise Bringing the gifts that my ancestors gave, I am the dream and the hope of the slave. I rise I rise I rise..

Sets the initial position for each background image (relative to background-origin

left | center | right | top | bottom | <length-percentage>

Can be comma-seperated for each background image or same value for all

If one length/% value: it's the left offset, centered vertically

background-position: <left-value> <top-value>

Four values is two keyterms with an offset for each

background-position: <left-right> <LR-offset> <top-value> <TB-offset>

Order matters if you're using length-percentage. Won't fail for keywords, unless you use two vertical or two horizontal

Sets whether an element's background extends underneath its border box, padding box, or content box.

border-box | padding-box | content-box | text 

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

padding-box

The background extends to the outside edge of the padding. No background is drawn beneath the border.

content-box

The background is painted within (clipped to) the content box.

text

The background is painted within (clipped to) the foreground text.

background-clip: border-box | padding-box | content-box | text 

Sets the background's origin: from the border start, inside the border, or inside the padding.

border-box | padding-box | content-box

border-box

The background is positioned relative to the border box.

padding-box

The background is positioned relative to the padding box.

content-box

The background is positioned relative to the content box.

background-origin: border-box | padding-box | content-box

Can be comma-seperated for each background image or same value for all

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.

cover | contain | [ <length-percentage> | auto ]{1,2}

Can be comma-seperated for each background image or same value for all

contain

Scales up or down until 100% height or width, without going over, and without cropping or stretching.

cover

Scales the image as needed to cover 100%. Cropped if needed.

auto

Same size as original or 100% of no intrinsic value set.

<length>

Sized as defined No negative values.

<percentage>

Relative to the size of the element area as determined by the background-origin (padding box by default). If background-attachment: fixed is set, the viewport size. No negative values.

background-size: auto | contain | cover | <length>

• Needed for hiDPI images
• ‘contain’ grows/shrinks to fully fit - may have 'white space', but no clipping.
• ‘cover’ grows to min size that covers 100% of height & width - no white space, but might clip.
• Note: Use for creating gradients backgrounds
  • note 2 length values needed to constrain a gradient

background-size: auto | contain | cover | 100px 200px | 150px

auto

image is actual size

cover

image maintains aspect ratio, covering entire element even if that means part of the image is cut off.

contain

image maintains aspect ratio, fitting the entire image into the element even if that means part of the background is showing or the image repeats.

length

image maintains aspect ratio, growing or shrinking so that the width is the length defined

auto length

image maintains aspect ratio, growing or shrinking so that the height is the length defined

length length

image DOES NOT NECESSARILY maintain its aspect ratio, height and width both grow or shrink to the length defined

background:
 img1 position / size repeat attachment origin clip,
 img2 position / size repeat attachment origin clip,
 img3 position / size repeat attachment box{1,2} bgcolor;    

background:
 url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box,
 url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;

DO NOT USE BACKGROUND SHORTHAND!!!

• Border properties & browser support
• If one ‘box’ value is present then it sets both 'background-origin' and 'background-clip' to that value. If two values are present, then the first sets 'background-origin' and the second 'background-clip'

Sets how an element's background images should blend with each other and with the element's background color.

normal | multiply | screen | overlay | darken | lighten | color-dodge 
color-burn | hard-light | soft-light | difference | exclusion
hue | saturation | color | luminosity

Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

background-blend-mode: screen, multiply;

Applies graphical effects like blur or color shift to an element.

none | blur() | brightness() | contrast() 
grayscale() | drop-shadow() | hue-rotate() | invert()
 saturate() | opacity() | sepia() | url()

Applies the effects to a foreground element.

Apply graphical effects to the area behind an element.

none | blur() | brightness() | contrast() 
grayscale() | drop-shadow() | hue-rotate() | invert()
 saturate() | opacity() | sepia() | url()

Applicable to a background (v. filter which is foreground)

backdrop-filter: url(image.svg#focus) blur(6px) saturate(50%);

To see the effect you must make the element or its background at least partially transparent because it applies to everything behind the element.

Prefixed in safari. New to Chrome and Edge. Not in FF

The <filter-function> data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.

blur()

Blurs the image. <length>

brightness()

Makes the image brighter or darker. <number-percent>

contrast()

Increases or decreases the image's contrast. <number-percent>

drop-shadow()

Applies a drop shadow behind the image. <x-y-blur-spread-color>

grayscale()

Converts the image to grayscale. <number-percent>

hue-rotate()​​​​​​​​​​​​​​

Changes the overall hue of the image. <angle>

invert()

Inverts the colors of the image. <number-percent>

opacity()

Makes the image transparent. <number-percent>

saturate()

Super-saturates or desaturates the input image. <number-percent>

sepia()

Converts the image to sepia. <number-percent>

Change the background of the deck so we can see filter-backdrop in action

remember how an invalid pseudoclass ruins everything?

In the next slides, change .body to body

Revert the unset

• W3C Background and Borders Specification
• image() notation