Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/url_value below:
<url> - CSS | MDN
MDN Web Docs
- References
- CSS
- <url>
Filter sidebar
In this article
- CSS
- Beginner's tutorials
- Your first website: Styling the content
- CSS styling basics
- What is CSS?
- CSS getting started
- Challenge: Biography page
- Basic selectors
- Attribute selectors
- Pseudo-classes and elements
- Combinators
- Box model
- Handling conflicts
- Values and units
- Sizing
- Backgrounds and borders
- Overflow
- Images, media, forms
- Styling tables
- Debugging CSS
- Challenge: Business card
- Challenge: Fancy letterhead
- Challenge: Fancy box styles
- CSS text styling
- Text and font fundamentals
- Styling lists
- Styling links
- Web fonts
- Challenge: Community school homepage
- CSS layout
- Introduction
- Floats
- Positioning
- Flexbox
- CSS grid layout
- Responsive web design
- Media queries
- Challenge: Fundamental layout
- CSS reference
- Modules
- CSS anchor positioning
- CSS animations
- CSS backgrounds and borders
- CSS basic user interface
- CSS box alignment
- CSS box model
- CSS box sizing
- CSS cascading and inheritance
- CSS color adjustment
- CSS colors
- CSS compositing and blending
- CSS conditional rules
- CSS containment
- CSS counter styles
- CSS custom properties for cascading variables
- CSS display
- CSS filter effects
- CSS flexible box layout
- CSS font loading
- CSS fonts
- CSS fragmentation
- CSS generated content
- CSS grid layout
- CSS images
- CSS inline layout
- CSS lists and counters
- CSS logical properties and values
- CSS masking
- CSS media queries
- CSS motion path
- CSS multi-column layout
- CSS namespaces
- CSS nesting
- CSS overflow
- CSS overscroll behavior
- CSS paged media
- CSS positioned layout
- CSS properties and values API
- CSS pseudo-elements
- CSS ruby layout
- CSS scoping
- CSS scroll anchoring
- CSS scroll snap
- CSS scroll-driven animations
- CSS scrollbars styling
- CSS selectors
- CSS shadow parts
- CSS shapes
- CSS syntax
- CSS table
- CSS text
- CSS text decoration
- CSS transforms
- CSS transitions
- CSS values and units
- CSS view transitions
- CSS writing modes
- CSSOM view
- Properties
- -moz-*
- -moz-float-edge Non-standard Deprecated
- -moz-force-broken-image-icon Non-standard Deprecated
- -moz-image-region Non-standard
- -moz-orient Non-standard
- -moz-user-focus Non-standard Deprecated
- -moz-user-input Non-standard Deprecated
- -webkit-*
- -webkit-border-before Non-standard
- -webkit-box-reflect Non-standard
- -webkit-mask-box-image Non-standard
- -webkit-mask-composite Non-standard
- -webkit-mask-position-x Non-standard
- -webkit-mask-position-y Non-standard
- -webkit-mask-repeat-x Non-standard
- -webkit-mask-repeat-y Non-standard
- -webkit-tap-highlight-color Non-standard
- -webkit-text-fill-color
- -webkit-text-security Non-standard
- -webkit-text-stroke
- -webkit-text-stroke-color
- -webkit-text-stroke-width
- -webkit-touch-callout Non-standard
- Custom properties (--*): CSS variables
- accent-color
- align-*
- align-content
- align-items
- align-self
- alignment-baseline
- all
- anchor-name
- animation-*
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range
- animation-range-end
- animation-range-start
- animation-timeline
- animation-timing-function
- appearance
- aspect-ratio
- backdrop-filter
- backface-visibility
- background-*
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border-*
- 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-*
- box-align Non-standard Deprecated
- box-decoration-break
- box-direction Non-standard Deprecated
- box-flex Non-standard Deprecated
- box-flex-group Non-standard Deprecated
- box-lines Non-standard Deprecated
- box-ordinal-group Non-standard Deprecated
- box-orient Non-standard Deprecated
- box-pack Non-standard Deprecated
- box-shadow
- box-sizing
- break-*
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-*
- clip Deprecated
- clip-path
- clip-rule
- color-*
- color
- color-interpolation
- color-interpolation-filters
- color-scheme
- column-*
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain-*
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container-*
- container
- container-name
- container-type
- content
- content-visibility
- counter-*
- counter-increment
- counter-reset
- counter-set
- cursor
- cx
- cy
- d
- direction
- display
- dominant-baseline
- empty-cells
- field-sizing Experimental
- fill-*
- fill
- fill-opacity
- fill-rule
- filter
- flex-*
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- flood-color
- flood-opacity
- font-*
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-palette
- font-size
- font-size-adjust
- font-smooth Non-standard
- font-stretch Deprecated
- font-style
- font-synthesis
- font-synthesis-position Experimental
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- forced-color-adjust
- gap
- grid-*
- 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
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-*
- image-orientation
- image-rendering
- image-resolution Experimental
- initial-letter
- inline-size
- inset-*
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- interpolate-size Experimental
- isolation
- justify-*
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-*
- line-break
- line-clamp
- line-height
- line-height-step Experimental
- list-*
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin-*
- 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
- margin-trim Experimental
- marker-*
- marker
- marker-end
- marker-mid
- marker-start
- mask-*
- 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-*
- math-depth
- math-shift Experimental
- math-style
- max-*
- max-block-size
- max-height
- max-inline-size
- max-width
- min-*
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- object-fit
- object-position
- offset-*
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- opacity
- order
- orphans
- outline-*
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow-*
- overflow
- overflow-anchor
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- overlay Experimental
- overscroll-*
- overscroll-behavior
- overscroll-behavior-block
- overscroll-behavior-inline
- overscroll-behavior-x
- overscroll-behavior-y
- padding-*
- 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
- page-*
- page
- page-break-after Deprecated
- page-break-before Deprecated
- page-break-inside Deprecated
- paint-order
- perspective
- perspective-origin
- place-*
- place-content
- place-items
- place-self
- pointer-events
- position-*
- position
- position-anchor
- position-area
- position-try
- position-try-fallbacks
- position-try-order
- position-visibility Experimental
- print-color-adjust
- quotes
- r
- reading-flow Experimental
- reading-order Experimental
- resize
- right
- rotate
- row-gap
- ruby-align
- ruby-position
- rx
- ry
- scale
- scroll-*
- 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-marker-group Experimental
- 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-*
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- shape-*
- shape-image-threshold
- shape-margin
- shape-outside
- shape-rendering
- speak-as Experimental
- stop-color
- stop-opacity
- stroke-*
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- tab-size
- table-layout
- text-*
- text-align
- text-align-last
- text-anchor
- text-box
- text-box-edge
- text-box-trim
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip Experimental
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-rendering
- text-shadow
- text-size-adjust Experimental
- text-spacing-trim Experimental
- text-transform
- text-underline-offset
- text-underline-position
- text-wrap
- text-wrap-mode
- text-wrap-style
- timeline-scope
- top
- touch-action
- transform-*
- transform
- transform-box
- transform-origin
- transform-style
- transition-*
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- user-modify Non-standard Deprecated
- user-select
- vector-effect
- vertical-align
- view-*
- view-timeline
- view-timeline-axis
- view-timeline-inset
- view-timeline-name
- view-transition-class
- view-transition-name
- visibility
- white-space
- white-space-collapse
- widows
- width
- will-change
- word-break
- word-spacing
- writing-mode
- x
- y
- z-index
- zoom
- Selectors
- & nesting selector
- Attribute selectors
- Class selectors
- ID selectors
- Type selectors
- Universal selectors
- Combinators
- Child combinator
- Column combinator Experimental
- Descendant combinator
- Namespace separator
- Next-sibling combinator
- Selector list
- Subsequent-sibling combinator
- Pseudo-classes
- :-moz-*
- :-moz-broken Non-standard Deprecated
- :-moz-drag-over Non-standard
- :-moz-first-node Experimental Non-standard
- :-moz-handler-blocked Non-standard
- :-moz-handler-crashed Non-standard
- :-moz-handler-disabled Non-standard
- :-moz-last-node Experimental Non-standard
- :-moz-loading Non-standard
- :-moz-locale-dir(ltr) Non-standard
- :-moz-locale-dir(rtl) Non-standard
- :-moz-only-whitespace Non-standard
- :-moz-submit-invalid Non-standard
- :-moz-suppressed Non-standard
- :-moz-user-disabled Non-standard
- :-moz-window-inactive Non-standard
- :active
- :any-link
- :autofill
- :blank Experimental
- :buffering
- :checked
- :current Experimental
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first-*
- :first
- :first-child
- :first-of-type
- :focus-*
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has-slotted
- :has()
- :host
- :host-context()
- :host()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link Experimental
- :modal
- :muted
- :not()
- :nth-*
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :open
- :optional
- :out-of-range
- :past
- :paused
- :picture-in-picture
- :placeholder-shown
- :playing
- :popover-open
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :seeking
- :stalled
- :state()
- :target-*
- :target
- :target-current Experimental
- :target-within Experimental
- :user-invalid
- :user-valid
- :valid
- :visited
- :volume-locked
- :where()
- Pseudo-elements
- ::-moz-*
- ::-moz-color-swatch Non-standard
- ::-moz-focus-inner Non-standard Deprecated
- ::-moz-list-bullet Experimental Non-standard
- ::-moz-list-number Experimental Non-standard
- ::-moz-meter-bar Non-standard
- ::-moz-progress-bar Experimental Non-standard
- ::-moz-range-progress Non-standard
- ::-moz-range-thumb Non-standard
- ::-moz-range-track Non-standard
- ::-webkit-*
- ::-webkit-inner-spin-button Non-standard
- ::-webkit-meter-bar Non-standard Deprecated
- ::-webkit-meter-even-less-good-value Non-standard
- ::-webkit-meter-inner-element Non-standard
- ::-webkit-meter-optimum-value Non-standard
- ::-webkit-meter-suboptimum-value Non-standard
- ::-webkit-progress-bar Non-standard
- ::-webkit-progress-inner-element Non-standard
- ::-webkit-progress-value Non-standard
- ::-webkit-scrollbar Non-standard
- ::-webkit-search-cancel-button Non-standard
- ::-webkit-search-results-button Non-standard
- ::-webkit-slider-runnable-track Non-standard
- ::-webkit-slider-thumb Non-standard
- ::after
- ::backdrop
- ::before
- ::checkmark Experimental
- ::column Experimental
- ::cue
- ::details-content
- ::file-selector-button
- ::first-letter
- ::first-line
- ::grammar-error
- ::highlight()
- ::marker
- ::part()
- ::picker-icon Experimental
- ::picker() Experimental
- ::placeholder
- ::scroll-*
- ::scroll-button() Experimental
- ::scroll-marker Experimental
- ::scroll-marker-group Experimental
- ::selection
- ::slotted()
- ::spelling-error
- ::target-text
- ::view-*
- ::view-transition
- ::view-transition-group()
- ::view-transition-image-pair()
- ::view-transition-new()
- ::view-transition-old()
- At-rules
- @charset
- @color-profile
- @container
- @counter-style
- @document Non-standard Deprecated
- @font-face
- @font-feature-values
- @font-palette-values
- @import
- @keyframes
- @layer
- @media
- @namespace
- @page
- @position-try Experimental
- @property
- @scope
- @starting-style
- @supports
- @view-transition
- Functions
- -moz-image-rect Non-standard Deprecated
- abs()
- acos()
- anchor-size() Experimental
- anchor() Experimental
- asin()
- atan()
- atan2()
- attr()
- blur()
- brightness()
- calc-size() Experimental
- calc()
- circle()
- clamp()
- color-mix()
- color()
- conic-gradient()
- contrast-color() Experimental
- contrast()
- cos()
- counter()
- counters()
- cross-fade()
- cubic-bezier()
- device-cmyk()
- drop-shadow()
- element() Experimental
- ellipse()
- env()
- exp()
- fit-content()
- grayscale()
- hsl()
- hue-rotate()
- hwb()
- hypot()
- if() Experimental
- image-set()
- image()
- inset()
- invert()
- lab()
- layer()
- lch()
- light-dark()
- linear-gradient()
- linear()
- log()
- matrix()
- matrix3d()
- max()
- min()
- minmax()
- mod()
- oklab()
- oklch()
- opacity()
- paint()
- palette-mix() Experimental
- path()
- perspective()
- polygon()
- pow()
- radial-gradient()
- ray()
- rect()
- rem()
- repeat()
- repeating-conic-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- round()
- saturate()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- scroll()
- sepia()
- shape()
- sign()
- sin()
- skew()
- skewX()
- skewY()
- sqrt()
- steps()
- symbols()
- tan()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- url()
- var()
- view()
- xywh()
- Types
- <absolute-size>
- <alpha-value>
- <angle-percentage>
- <angle>
- <baseline-position>
- <basic-shape>
- <blend-mode>
- <box-edge>
- <calc-keyword>
- <calc-sum>
- <color-interpolation-method>
- <color>
- <content-distribution>
- <content-position>
- <custom-ident>
- <dashed-ident>
- <dimension>
- <display-box>
- <display-inside>
- <display-internal>
- <display-legacy>
- <display-listitem>
- <display-outside>
- <easing-function>
- <filter-function>
- <flex>
- <frequency-percentage>
- <frequency>
- <generic-family>
- <gradient>
- <hex-color>
- <hue-interpolation-method>
- <hue>
- <ident>
- <image>
- <integer>
- <length-percentage>
- <length>
- <line-style>
- <named-color>
- <number>
- <overflow-position>
- <overflow>
- <percentage>
- <position-area>
- <position>
- <ratio>
- <relative-size>
- <resolution>
- <self-position>
- <shape> Deprecated
- <string>
- <system-color>
- <text-edge>
- <time-percentage>
- <time>
- <transform-function>
- <url>
- Guides
- Anchor positioning
- Using anchor positioning
- Handling overflow
- Animations
- Animatable properties
- Using animations
- Backgrounds and borders
- Using multiple backgrounds
- Resizing background images
- Scaling SVG backgrounds
- Box alignment
- Overview
- Box alignment in block layout
- Box alignment in flexbox
- Box alignment in grid layout
- Box alignment in multi-column layout
- Box model
- Introduction
- Mastering margin collapsing
- Cascade
- Introduction
- Inheritance
- Specificity
- Property value processing
- Shorthand properties
- Custom properties
- Using custom properties
- Colors
- Applying color to HTML
- Color values
- Using relative colors
- Using color wisely
- Accessibility: Colors and luminance
- Accessibility: Color contrast
- Columns
- Basic concepts
- Styling columns
- Using multi-column layouts
- Spanning and balancing columns
- Handling overflow
- Handling content breaks
- Conditional rules
- Using feature queries
- Using container scroll-state queries
- Containment
- Container queries
- Using containment
- Using container size and style queries
- CSSOM view
- Coordinate systems
- Viewport concepts
- Display
- Block and inline layout
- Flow layout
- Flow layout and overflow
- Flow layout and writing modes
- In flow and out of flow
- Layout and the containing block
- Formatting contexts
- Block formatting context
- Inline formatting context
- Using multi-keyword syntax
- Visual formatting model
- Filter effects
- Using filter effects
- Flexbox
- Basic concepts
- Flexbox and other layouts
- Aligning flex items
- Ordering flex items
- Controlling flex item ratios
- Wrapping flex items
- Typical use cases
- Fonts
- OpenType features
- Variable fonts
- WOFF
- Grid
- Basic concepts
- Grid and other layouts
- Grid template areas
- Using line-based placement
- Using named grid lines
- Auto-placement
- Aligning items
- Logical values and writing modes
- Common grid layouts
- Subgrid
- Grid layout and accessibility
- Masonry layout Experimental
- Images
- Using gradients
- Styling replaced elements
- Implementing image sprites
- Lists and counters
- Using counters
- Indenting lists
- Logical properties
- Basic concepts
- Logical properties for floating and positioning
- Logical properties for margins, borders, and padding
- Logical properties for sizing
- Media queries
- Using media queries
- Using media queries for accessibility
- Testing media queries programmatically
- Printing
- Nesting style rules
- Nesting at-rules
- Nesting and specificity
- Using nesting
- Overflow
- Creating carousels
- Positioning
- Stacking context
- Stacking floating elements
- Understanding z-index
- Using z-index
- Stacking without z-index
- Scroll anchoring
- Overview
- Scroll snap
- Basic concepts
- Using scroll snap events
- Selectors
- Privacy and :visited
- Selector structure
- Selectors and combinators
- Using :target
- Shapes
- Overview
- Box-value shapes
- Image-based shapes
- Using shape-outside
- Syntax
- Introduction
- Comments
- At-rule functions
- Error handling
- Text
- Wrapping and breaking text
- Transforms
- Using transforms
- Transitions
- Using transitions
- Values and units
- Value definition syntax
- Numeric data types
- Textual data types
- Using math functions
- Layout cookbook
-
- Recipe: Media objects
- Column layouts
- Center an element
- Sticky footers
- Split navigation
- Breadcrumb navigation
- List group with badges
- Pagination
- Card
- Grid wrapper
- Tools
-
- Color picker tool
- Box-shadow generator
- Border-image generator
- Border-radius generator
In this article
<url>
The <url>
CSS data type is a pointer to a resource. The resource could be an image, a video, a CSS file, a font file, an SVG feature etc.
Syntax
<url> = <url()>
Values
The value is either of the following:
-
<url()>
-
The url()
function accepts only a URL literal string (with or without quotes).
Note: The specification defines an alternative function called src()
that accepts a URL string or a CSS variable. But no web browser has implemented the function yet.
Specifications Specification CSS Values and Units Module Level 4
# url-value See also
Help improve MDN Was this page helpful to you? Learn how to contribute
.
This page was last modified on Feb 13, 2025 by MDN contributors.
View this page on GitHub
â¢
Report a problem with this content
RetroSearch is an open source project built by @garambo
| Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4