In this tutorial we will show you the solution of how to CSS background image, a background image is used to sets images as background for an HTML element.
There are many other properties that we can use with the image like repeat, color, gradient, etc.
These all are used with a background image to set one or more images as background to an HTML element.
Step By Step Guide On How To CSS Background Image :-
Now, before using the background image in our example, let us first see the syntax of the background image.
background-image: url|none|initial|inherit;
There are many CSS values that we can use with background image attributes to customize our background. Here, below we are going to use some from them.
Example one
<!DOCTYPE html>
<html>
<head>
<title> example one </title>
<style>
body {
background-image: url("roads.gif");
background-color: black;
}
</style>
</head>
<body>
</body>
</html>Example two
<!DOCTYPE html>
<html>
<head>
<title> example two </title>
<style>
body {
background-image: url("roads.gif"), url("cars.gif");
background-color: black;}
</style>
</head>
<body>
</body>
</html>Example three
<!DOCTYPE html>
<html>
<head>
<title> example three </title>
<style>
body {
background-image: url("roads.gif"), url("cars.gif");
background-repeat: no-repeat, repeat;
background-color: black;
}
</style>
</head>
<body>
</body>
</html>- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As with the help of above example we see how to use background image property inside an Html element. Here, we also use some other properties like background color and background repeat. You are able to use whatever to want to create a creative background with help of image.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we can understand how to CSS background image.
I hope this tutorial on how to CSS background image helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
