The CSS background-image property is used to set an image as a background for the selected element. The url() is used in the background-image to set the image source.

Syntax

The syntax of CSS background-image property is as follows ?

Selector {
   background-image: /*value*/
}

The following can be the values ?

• url('URL') ? The image url i.e., the source

• conic-gradient() ? Place a conic gradient as the background image.

• linear-gradient() ? Place a linear gradient as the background image.

• radial-gradient() ? Place a radial gradient as the background image.

• repeating-conic-gradient() ? Repeat a conic gradient

• repeating-linear-gradient() ? Repeat a linear gradient

• repeating-radial-gradient() ? Repeat a radial gradient

The following examples illustrate CSS background-image property ?

Set background image

The background image is set using the background-image property. The image source link is set using the url() ?

background-image: url("https://www.tutorialspoint.com/servlets/images/servlets.jpg");

Example

Let us see the example ?

   


   
Learn Python Blockchain
   

      
Servlets are programs that run on a Web or Application server and act as a middle layer between a requests coming from a Web browser or other HTTP client and databases or applications on the HTTP server. Using Servlets, you can collect input from users through web page forms, present records from a database or another source, and create web pages dynamically.
   

Set background image for the heading

The background image is set for the heading using the background-image property. The image source link is set using the url() ?

h1 {
   background-image: url("https://www.tutorialspoint.com/hibernate/images/hibernate-patterns.jpg");
   background-repeat: no-repeat;
   color: black;
}

Example

Let us see the example ?

   


   
Demo
   

      

   

Set a linear gradient as the background image

The linear gradient is set using the background-image property with the value linear-gradient(). The image is set using the url() ?

background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");

Example

Let us see the example ?

   


   

      

         
I am Amit
         
And I'm an Entrepreneur
         Contact Me