Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

background-image

Description

The background-image CSS property sets the background image(s) of an element.

Syntax

CSS

background-image: value;

JS

object.style.backgroundImage = "value";

Values

<'background-image'> = <bg-image>#
<bg-image> = <image> | none
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> =
    <length> |
    <percentage>
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

none

An image layer but draws nothing.

Initial

none

Examples

1 · image · url

2 · image · gradient · linear-gradient

3 · image · gradient · radial-gradient

4 · none

5 · JS

background

background-attachment

background-clip

background-color

background-position

background-position-x

background-position-y

background-repeat

accent-color

align-content

align-items

align-self

all

animation

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timeline

animation-timing-function

appearance

aspect-ratio

backdrop-filter

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

block-ellipsis

block-size

border

border-block

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-end-end-radius

border-end-start-radius

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-start-end-radius

border-start-start-radius

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-decoration-break

box-shadow

box-sizing

caption-side

caret

caret-color

caret-shape

clear

clip

clip-path

color

color-scheme

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

contain

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

container

container-name

container-type

content

content-visibility

continue

counter-increment

counter-reset

counter-set

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

font-family

font-feature-settings

font-kerning

font-optical-sizing

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

font-weight

forced-color-adjust

gap

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-start

grid-row

grid-row-end

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

height

hyphens

image-rendering

initial-letter

initial-letter-align

inline-size

inset

inset-block

inset-block-end

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

isolation

justify-content

justify-items

justify-self

left

letter-spacing

line-break

line-clamp

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-block

margin-block-end

margin-block-start

margin-bottom

margin-inline

margin-inline-end

margin-inline-start

margin-left

margin-right

margin-top

mask

mask-border

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

math-depth

math-shift

math-style

max-block-size

max-height

max-inline-size

max-lines

max-width

min-block-size

min-height

min-inline-size

min-width

mix-blend-mode

nav-down

nav-left

nav-right

nav-up

object-fit

object-position

opacity

orphans

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-block

overflow-clip-margin

overflow-inline

overflow-wrap

overflow-x

overflow-y

padding

padding-block

padding-block-end

padding-block-start

padding-bottom

padding-inline

padding-inline-end

padding-inline-start

padding-left

padding-right

padding-top

paint-order

perspective

perspective-origin

place-content

place-items

place-self

pointer-events

position

print-color-adjust

quotes

resize

right

rotate

row-gap

scale

scroll-behavior

scroll-margin

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

shape-margin

shape-outside

tab-size

table-layout

text-align

text-align-all

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-indent

text-justify

text-orientation

text-overflow

text-shadow

text-transform

text-underline-offset

text-underline-position

top

transform

transform-box

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

translate

unicode-bidi

vertical-align

visibility

white-space

widows

width

word-break

word-spacing

word-wrap

writing-mode

z-index

zoom

World Wide Web Consortium (W3C)

HomeMenu