How To Give Background Image In CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to give background image in CSS, a user's experience is influenced by what they see on a website. It will also have an impact on how readily users can navigate the site as a whole.
Adding photos to the background of various portions of a website is sometimes more visually attractive and fascinating than simply altering the colour of the background. In this tutorial, we shall learn how to give background images in CSS
Step By Step Guide On How To Give Background Image In CSS :-
We can use the CSS background-image property to specify one or more background images for an element. Values for the URL property define the images.
If you want to enter the URL of more than one image, use a comma to separate the URLs.
- none: This is the default situation, in which no image can be shown.
- initial: This property is used to set the default value of the property.
- inherit: The property is passed down from the parent element.
Following is an example of how to add a background image in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-image: url(
"img/xyz.jpg");
}
h1 {
color: blue;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Add Background</h1>
<div>
This is a sample text
</div>
</body>
</html>
- To begin, type <! DOCTYPE html>, which tells the web browser that the file is in HTML format.
- The < html> element, on the other hand, is used to signal the start of HTML content.
- The <head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. A good example of paired tags is the <head> and <title> tags. As a result, both have the </head> and </title> closing tags.
- The <body> element is used to define the content of a webpage. This is where all of the stuff for the website will be written. We have mentioned an <h1> tag here.
- Next, make sure you've set up an assets directory (folder) to contain the photos you'll need for your project. In the project we're working on, for example, we've created an img folder and added an image called xyz.jpg that we want to use.
- The background-image CSS property was then used to position the image behind the HTML element by giving its path. You can also use an absolute path, which is a full web address that starts with a domain URL (http://www.) to add photos. The background-image property is demonstrated in this example by setting the url value to img/xyz.jpg.
- Use the </body> and < /html> tags to close the < body> and <html> tags, respectively.
Conclusion :-
CSS Background Picture is a CSS attribute that allows you to set the background image for an element. The image can be used as a graphic or as a gradient for a certain element.
This attribute can be applied to block and inline components inside an HTML page. The main advantage of this property is that it allows us to add additional HTML material to the top of the page, such as headlines, and it also allows us to layer other picture and text content inside the same available area.
I hope this tutorial on how to give background image in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
