CSS has a variety of different properties that can reference an image file, displaying that file on a web page normally as part of an element’s background. This is done using the CSS image syntax, which is url().
Usage is simple — you insert the path to the image you want to include in your page inside the brackets of
url(), for example:
Note about formatting: The quotes around the URL can be either single or double quotes, and they are optional. However, if you are including some special characters such as single or double quotes, parentheses, and white space, then if the URL is not quoted, those special characters need to be escaped with a backslash(\).
This will cause
my-image.png to be displayed in the background of whatever element or elements the
background-image property is applied to. Accepted image formats are:
- .svg (this includes references to in-page SVG elements, for example
- data URIs
Browser support notes
- IE < 9: doesn’t support SVG for background-images, or multiple background images, or gradients
- IE6: doesn’t support PNG transparency properly; result looks buggy and malformed
- Only Opera and Chrome support .webp
Properties that accept URL as a value