Category: Web Development & Approved by On January-18-2021 14:08:53

Background Image Property

The background-image property is used to set one or more background images on an HTML elements.

The syntax for background-image property is:
background-image: url();
Inside url() function image link or address of image file which is already in your web project file is to be inserted.
background-image: url(../images/logo.jpg);
Or background-image: url(‘’);

Images inserted on an HTML elements by “background-image” has the keywords none or <image> as an value.
none - this value denote the absence of images.
<image> - this value display images. You can use several functions, separated by commas, even multiple backgrounds images are supported.

Different image-related functions are:

  • cross-fade()

  • element()

  • image()

  • image-set()

  • linear-gradient()

  • radial-gradient()

  • repeating-linear-gradient()

  • repeating-radial-gradient()

  • paint()

  • url()

You can even set a fallback color, if the images doesn’t get load due to bad network than or gradient-color is not supported by browser, so the browser will look for the background color.
background-image: url(../images/logo.jpg) magnate;

Here be will use multiple value

CSS Code
p {
font-size: 1.5em;
color: #00cfff;
background-image: none;
background-color: transparent;
div {
linear-gradient(to bottom, rgba(218, 112, 214,0.5), rgba(148, 0, 211,0.5)),

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here

Note: content are taken from various documentation files


Share your thoughts about this post
web counter