In this tutorial we will show you the solution of how to add background image in CSS, most websites include images, and people only recall 20% of what they read, they remember 80% of what they see. Images enhance the informative, interesting, and memorable qualities of your material.
Background images can be specified in CSS using the background image and various additional attributes to control the image's behaviour. This article explains how to use CSS to set background images.
Step By Step Guide On How To Add Background Image In CSS :-
Setting one or more background pictures for an element is done with the background-image property.
The image is placed in the upper left corner by default. To specify two or more photos, we must use a comma to separate the URLs for each image.
Write the following CSS code to add a background image:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
background-image: url("img/abc.jpg");
}
</style>
</head>
<body>
<div>
<p>Content</p>
</div>
</body>
</html>
- We begin by typing <! DOCTYPE html>, which informs the web browser of the file's HTML version.
- On the other hand, the <html> element is used to indicate the beginning of HTML content.
- The information about web pages is now contained in the <head> tag. This tag uses the< title> element to allow us to provide a web page title. The <head> and <title> tags are examples of paired tags. As a result, both have the closing tags< /head> and </title>.
- The <body> element is used to define the webpage's content. This is where all of the website's material will be written.
- The next step is to make sure you have an assets directory (folder) set up to store the images you'll need for your project. For example, in the project we're working on, we've established an img folder and added an image called abc.jpg that we wish to use.
- We have then used the background-image CSS property to position the picture behind the HTML element by specifying its path. You can also utilise an absolute path to add images, which is a full web address that begins with a domain URL (http://www.)
- To close the <body> and <html> tags, use the </body> and </html> tags, accordingly.
Properties That Can Be Used To Create Background Images
- background-repeat: This method is used in conjunction with background-image and defines whether or not the background image should repeat. It accepts many options such as no-repeat (doesn't repeat the image), repeat-x (tiles the image horizontally), and repeat-y (repeats the image vertically)
- background-position: This specifies the position of the background picture to be located, with values such as top, bottom, right, left, and centre, as well as combinations of these values (ex: left bottom).
- background-size: It determines the size of the image that will be put and provides for size adjustment.
Conclusion :-
Including images on your website is beneficial to both visitors and search engines. It's simple whether you're using a content management system or starting from scratch.
Adding an image is easy with the help of the code mentioned above. I hope this tutorial on how to add background image in CSS helps you.
About Riya
