html

CSS url()

In the url(), we give the path of the file or image which we want to add to our HTML file in the background-image property. We will add this url() function and give the path of the image in this url()as a parameter. We can use this url() function for adding the background-image, border-image, cursor, etc. In this tutorial, we will show you how we can use the url() function in CSS. We will explore examples in this tutorial and will explain to you how to add this function in CSS.

Example # 1:

We’ll start with our first example by opening a new file in the software, which is Visual Studio Code. When we make a new file in Visual Studio Code, we have the choice of picking the language and we choose HTML. Next, we must build the HTML code. By typing “!” and then pressing “Enter,” Visual Studio Code gives us the ability to acquire the basic tags automatically. We give the link to the CSS file in the HTML head tag, so we will use the url() function in CSS. In the body, we have a heading and a simple paragraph. After this, we put a “div” container. We save this file and then we are moving toward the CSS file. Now, look at the CSS code below.

We set the “div” in this code and add the “background-image” property. Now, we have to set the image for the background. For adding an image, we must use the “url()” function and give the path of the image which we want to add as the parameter of the “url()” function. We use the “text-align” property and set it to “center”. Then, set the “width” to as “500px”. The “height” is “260px”. We also style the heading to make the output more attractive. We set the “color” which defines the color of the heading’s text and set “red” for this property. The “font-family” for the heading’s text is “Algerian”.

We also have a paragraph in the HTML file, so we also apply some properties to this paragraph. We set the size of the paragraph’s text by utilizing the CSS “font-size” property and set it as “18px”. Now, again we use the “color” property for the paragraph’s text and use “blue”.

We obtain this output by pressing “ALT+B” in the HTML file or you may press the right mouse button and then select the “Open in default browser” for getting the output. In the output, you can see that there is the image below the heading and the text. We add this image by putting the path of this image in the url() parameter.

Example # 2:

We again add the heading “h2” and the paragraph “p” in this example. Then, put the “div” below this. We will add the image’s url() in the background-image property for this div. You will see this in the CSS file, how we add the path in the “url ()” function.

We are just adding the “background-image” in the “div” and placing the “url()” function. We are providing the path of the image as the “myhouse.png”. You must put the correct path in this “url()” parameter. The “width” of this image is “400px” and the “height” is “350px”. The heading “color” we are using is “purple”. The “font-family” of the heading is “Times New Roman”. The paragraph “font-size” is “20px” and “color” is “green”.

The output shows that there is an image after the heading and the paragraph. The other heading appears on the image as set in the CSS file.

Example # 3:

The HTML code for this example is the same as we have built in the first example in which we have a paragraph, a heading, and an empty div container but we will use the different parameters of the url()function in the CSS code.

The “height” for the “div” is “700px” and “500px” in its “width”. Now, we are using “background-image” and we are putting two different url’s where we are giving different images path. We put the first “url” and inside the parameter. We put “smily.jpeg” as the path of the image and then put another “url” by separating both url’s with “,”.

We put “smily.jpeg” as the parameter of the second url. Then, we have the “background-repeat” property which is used for setting how the background images are repeated. We set it to “no-repeat” for both images. We also set the “background-position” which sets the positions of both images. We place “right” for the first image and “left” for the second image. For “h2” we have “marron” for the “color” of the heading. The heading’s “font-family” is “Times New Roman” and it is aligned in the “center”. The “30px” we are utilizing for the “font-size” and change the “font-family” to “Algerian”. We also utilize the “font-size” property for the “p” and it is “25px”. We set the “color” of the paragraph as “rgb (37, 35, 35)” which appears as “grey”. We also align this like the heading, in the “center”.

You can see two images where the first image is placed on the left side and the second image is placed on the right side of the output screen. We put the path of both images in the url as the parameter. So, both images appear in the output.

Example # 4:

The HTML file we are using is the same as above and we will change the font-family by placing the url and putting the image using the other url function in CSS.

In this CSS file, the “font-face” is used for specifying the custom font. It provides us the opportunity for selecting from a wide range of fonts. We set “font-family” as “Open Sans”. In the “src”, the “local” function is for getting the font from the local system of the user. If it is not found in the “Open Sans”, it will check the next option where we place the “url”. And it checks it in “woff2” format, if available. Then, it will apply this but if it is not available, it will move to the next “url”. If it is not available in any option, it will select the “font-family” which we have described below which is “sans serif”.

We do all these by putting the “url”. Then, all the images in the div container by using the same method, as we discussed, by placing the path in the “url” function and settings “width” and “height”.

The output shows that the font family of the heading and the paragraph changes and also there is an image below for all these.

Conclusion

We have presented this tutorial to guide you about the CSS url() function. We have gone through this topic in deep depth and have explored different examples in which we have utilized this “url ()” function in CSS code. We have explained that we use this url() function for linking to a resource: image, font-family, etc. In this tutorial, we have also discussed how to add the path as the parameter in this “url()” function. We have prepared a complete tutorial for you in which we have provided the code and have explained this code in detail along with the output.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.